Vue 组件之间传值

这篇具有很好参考价值的文章主要介绍了Vue 组件之间传值。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、Vue 组件之间传值的主要方法

Vue 3 对于组件之间传递值的基本思想与 Vue 2 相似,但是有一些语法和 API 上的改变,主要的传值方法有以下几种:

1、父组件向子组件传值,使用 props:可以通过在子组件上绑定 props,然后在父组件中通过 v-bind 绑定相应的数据来传递数据。

2、子组件向父组件传值,使用 $emit:可以通过在子组件中使用 $emit 触发自定义事件,并在父组件中使用 v-on 监听相应的事件来传递数据。

3、兄弟组件之间传值:可以通过使用一个共同的父组件,然后将需要共享的数据放在父组件的 data 中,再通过 props 将数据传递给各自的子组件。

4、跨级组件传值,使用 provide 和 inject(同样适用于父子组件传值):provide 可以在祖先组件中定义一个值或者方法,然后在子孙组件中使用 inject 来注入这个值或者方法。

5、使用全局事件总线:可以使用 Vue 的事件机制,通过在 Vue 实例上使用 $on 来监听事件,然后在其他组件中使用 $emit 触发相应的事件来传递数据。这种方式可以在任意组件之间传递数据。

6、使用 Vuex:当应用的数据状态比较复杂或者需要在多个组件之间共享时,可以使用 Vuex,它是一个专为 Vue.js 应用程序开发的状态管理模式。可以在任何组件中访问和修改 Vuex 存储的数据,通过 mutations 来修改状态,通过 actions 来触发 mutations。这种方式可以方便地在不同的组件中进行状态管理和数据共享。

7、使用 $attrs 和 $listeners,$attrs 和 $listeners 是常用的两个特殊属性,它们可以用来向组件传递属性和事件监听器。

8、使用 $refs:可以使用 Vue 提供的 $refs 属性来获取组件实例,然后通过调用组件的方法来进行数据传递。这种方式不推荐使用,因为不易维护和调试。

9、使用事件总线库:可以使用 Vue.js 的第三方库如 Event Bus、Tiny-Emmiter 等来传递数据。这些库提供了一种方便、简单的方式来在不同的组件之间进行事件传递。但是需要注意,使用第三方库可能会增加项目的复杂性和维护成本。

二、Vue 2 组件之间传值示例代码

  • 1、父组件向子组件传值,使用 props:可以通过在子组件上绑定 props,然后在父组件中通过 v-bind 绑定相应的数据来传递数据。

父组件中的代码:

<template>
  <div>
    <child-component :prop-a="dataA"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      dataA: 'data from parent',
    };
  },
};
</script>

 子组件中的代码:

 

<template>
  <div>
    {{ propA }}
  </div>
</template>

<script>
export default {
  props: {
    propA: String,
  },
};
</script>
  • 2、子组件向父组件传值,使用 $emit:可以通过在子组件中使用 $emit 触发自定义事件,并在父组件中使用 v-on 监听相应的事件来传递数据。

子组件中的代码:

<template>
  <div>
    <button @click="sendDataToParent">Send Data To Parent</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataB: 'data from child',
    };
  },
  methods: {
    sendDataToParent() {
      this.$emit('send-data', this.dataB);
    },
  },
};
</script>

 父组件中的代码:

<template>
  <div>
    <child-component @send-data="receiveDataFromChild"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    receiveDataFromChild(dataB) {
      console.log(dataB);
    },
  },
};
</script>

 

  • 3、兄弟组件之间传值:可以通过使用一个共同的父组件,然后将需要共享的数据放在父组件的 data 中,再通过 props 将数据传递给各自的子组件。

父组件中的代码:

<template>
  <div>
    <child-a :prop-a="dataA"></child-a>
    <child-b :prop-b="dataB"></child-b>
  </div>
</template>

<script>
import ChildA from './ChildA.vue';
import ChildB from './ChildB.vue';

export default {
  components: {
    ChildA,
    ChildB,
  },
  data() {
    return {
      dataA: 'data from parent to child a',
      dataB: 'data from parent to child b',
    };
  },
};
</script>

 子组件 A 中的代码:

<template>
  <div>
    {{ propA }}
  </div>
</template>

<script>
export default {
  props: {
    propA: String,
  },
};
</script>

 子组件 B 中的代码:

<template>
  <div>
    {{ propB }}
  </div>
</template>

<script>
export default {
  props: {
    propB: String,
  },
};
</script>

 

  • 4、跨级组件传值,使用 provide 和 inject(该方法也可用于父子组件传值):provide 可以在祖先组件中定义一个值或者方法,然后在子孙组件中使用 inject 来注入这个值或者方法。

祖先组件中的代码:

<template>
  <div>
    <child-a></child-a>
  </div>
</template>

<script>
import ChildA from './ChildA.vue';

export default {
  components: {
    ChildA,
  },
  provide() {
    return {
      sharedData: 'data from ancestor',
    };
  },
};
</script>

 子孙组件 A 中的代码:

<template>
  <div>
    {{ sharedData }}
  </div>
</template>

<script>
export default {
  inject: ['sharedData'],
};
</script>

 

  • 5、使用全局事件总线:可以使用 Vue 的事件机制,通过在 Vue 实例上使用 $on 来监听事件,然后在其他组件中使用 $emit 触发相应的事件来传递数据。这种方式可以在任意组件之间传递数据。

在 main.js 中定义一个空的 Vue 实例作为事件总线:

import Vue from 'vue';
export const bus = new Vue();

 子组件 A 中的代码:

<template>
  <div>
    <button @click="sendDataToSibling">Send Data To Sibling</button>
  </div>
</template>

<script>
import { bus } from './main';

export default {
  methods: {
    sendDataToSibling() {
      bus.$emit('send-data', 'data from child a');
    },
  },
};
</script>

 子组件 B 中的代码:

<template>
  <div>
    {{ dataFromSibling }}
  </div>
</template>

<script>
import { bus } from './main';

export default {
  data() {
    return {
      dataFromSibling: '',
    };
  },
  mounted() {
    bus.$on('send-data', (data) => {
      this.dataFromSibling = data;
    });
  },
};
</script>

 

  • 6、使用 Vuex:当应用的数据状态比较复杂或者需要在多个组件之间共享时,可以使用 Vuex,它是一个专为 Vue.js 应用程序开发的状态管理模式。可以在任何组件中访问和修改 Vuex 存储的数据,通过 mutations 来修改状态,通过 actions 来触发 mutations。这种方式可以方便地在不同的组件中进行状态管理和数据共享。

在 store.js 中定义一个 Vuex store:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    dataC: 'data from Vuex',
  },
  mutations: {
    updateDataC(state, payload) {
      state.dataC = payload;
    },
  },
});

export default store;

 子组件 A 中的代码:

<template>
  <div>
    <button @click="sendDataToSibling">Send Data To Sibling</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['updateDataC']),
    sendDataToSibling() {
      this.updateDataC('data from child a');
    },
  },
};
</script>

 子组件 B 中的代码:

<template>
  <div>
    {{ dataC }}
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['dataC']),
  },
};
</script>

 

  • 7、父子组件传值,使用 $attrs$listeners

$attrs 是一个包含了父组件传递给子组件的所有属性的对象,可以在子组件中通过访问 $attrs 来获取这些属性。如果不希望某些属性传递到子组件中,可以在子组件中使用 v-bind="$attrs" 并指定排除的属性名称,或者在父组件中使用 .sync 修饰符,将属性绑定到子组件的一个名为 $attrs 的属性上。

$listeners 是一个包含了父组件传递给子组件的所有事件监听器的对象,可以在子组件中通过访问 $listeners 来获取这些事件监听器。如果需要在子组件中监听某个事件,可以使用 v-on="$listeners" 将所有的事件监听器绑定到子组件上。

$attrs 和 $listeners 是常用的两个特殊属性,它们可以用来向组件传递属性和事件监听器。假设我们有一个父组件和一个子组件,子组件需要接收父组件的一些属性和事件监听器,同时还需要把这些属性和事件传递给子组件的某个子元素。

父组件中的代码:

<template>
  <div>
    <child-component :title="title" v-on:click="handleClick" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      title: 'Hello World',
    };
  },
  methods: {
    handleClick() {
      console.log('Button Clicked');
    },
  },
};
</script>

 子组件中的代码:

<template>
  <div>
    <button @click="$emit('click')">Click me</button>
    <div v-bind="$attrs">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  mounted() {
    console.log(this.$attrs);
    console.log(this.$listeners);
  },
};
</script>

 

在子组件中,我们使用 v-bind="$attrs" 把所有父组件传递过来的属性绑定到子元素上。同时,我们使用 $emit('click') 来触发父组件传递过来的点击事件。

在子组件 中,需要设置 inheritAttrs: false,来禁止自动将父组件传递的属性绑定到子组件的根元素上。这样,我们就可以使用 v-bind="$attrs" 把所有属性绑定到子元素上。

在 mounted 钩子中,我们可以通过 this.$attrsthis.$listeners 来分别访问所有属性和事件监听器。这样,我们就可以在子组件中使用这些属性和事件了。

  • 8、使用 $refs:可以使用 Vue 提供的 $refs 属性来获取组件实例,然后通过调用组件的方法来进行数据传递。这种方式不推荐使用,因为不易维护和调试。
  • 9、使用事件总线库:可以使用 Vue.js 的第三方库如 Event Bus、Tiny-Emmiter 等来传递数据。这些库提供了一种方便、简单的方式来在不同的组件之间进行事件传递。但是需要注意,使用第三方库可能会增加项目的复杂性和维护成本。

三、Vue 3 组件之间传值示例代码

  • 1、Props

Props 是一种在组件之间传递数据的方式,通过在组件标签上使用属性绑定,父组件可以向子组件传递数据。在子组件中,通过在 props 中定义对应的属性名,可以获取到父组件传递过来的数据。

例如,父组件中的模板:

<template>
  <child-component :message="hello"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      hello: 'Hello from parent!'
    };
  }
};
</script>

 子组件中的模板:

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  }
};
</script>

 

  • 2、$emit 

$emit  是一种在子组件中触发事件的方式,通过在子组件中使用 $emit 方法,可以向父组件发送数据。在父组件中,通过在子组件标签上使用 v-on@ 语法,可以监听子组件触发的事件,并获取子组件发送的数据。

例如,子组件中的模板:

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from child!');
    }
  }
};
</script>

 父组件中的模板:

<template>
  <child-component @message-sent="receiveMessage"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    receiveMessage(message) {
      console.log(message);
    }
  }
};
</script>

 

  • 3、Provide/Inject

Provide/Inject 是一种在祖先组件和后代组件之间共享数据的方式。通过在祖先组件中使用 provide 方法提供数据,在后代组件中使用 inject 方法获取数据。

例如,祖先组件中的模板:

<template>
  <child-component></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello from ancestor!'
    };
  }
};
</script>

 后代组件中的模板:

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

 

  • 4、$attrs 和 $listeners

$attrs 和 $listeners 是在 Vue 2 中引入的特性,但在 Vue 3 中也得到了支持。

例如,父组件中的模板:

<template>
  <child-component message="Hello from parent!" @click="handleClick"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleClick() {
      console.log('Clicked!');
    }
  }
};
</script>

 子组件中的模板:

<template>
  <div v-bind="$attrs" v-on="$listeners">{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  }
};
</script>

 

  • 5、provide/inject 与 props 的结合使用

在 Vue 3 中,provide 和 inject 可以与 props 结合使用,从而实现一种高级的数据传递方式。具体做法是,在祖先组件中使用 provide 方法提供数据,并在后代组件中使用 inject 方法获取数据;同时,在后代组件中,可以在 props 中声明和接收数据,从而实现数据的类型检查和默认值设定。

例如,祖先组件中的模板:

<template>
  <child-component></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello from ancestor!'
    };
  }
};
</script>

 后代组件中的模板:

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  inject: ['message'],
  props: {
    message: {
      type: String,
      default: 'Hello from default!'
    }
  }
};
</script>

 

在上面的例子中,子组件会首先从祖先组件中获取名为 message 的数据,如果没有提供,则使用默认值 Hello from default!。在子组件中,props 会覆盖 provide/inject,因此如果父组件和子组件都提供了同一个属性,子组件中的 props 值会覆盖 provide/inject 中的值。

  • 6、Vuex

Vuex 是一种专门用于管理应用程序状态的库,可以用于跨组件传递数据。在 Vuex 中,可以定义一个全局的状态管理器,所有的组件都可以通过 getter 和 setter 方法访问和修改这个状态管理器中的数据。

例如,定义一个 Vuex store:

import { createStore } from 'vuex';

const store = createStore({
  state: {
    message: 'Hello from store!'
  },
  mutations: {
    updateMessage(state, message) {
      state.message = message;
    }
  },
  getters: {
    getMessage(state) {
      return state.message;
    }
  }
});

export default store;

 在组件中使用 Vuex:

<template>
  <div>{{ message }}</div>
  <button @click="updateMessage">Update message</button>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapGetters(['getMessage'])
  },
  methods: {
    ...mapMutations(['updateMessage'])
  }
};
</script>

 

在这个例子中,组件通过 mapGetters 方法将 Vuex store 中的 getMessage 方法映射为组件中的计算属性,从而获取 Vuex store 中的数据;同时,通过 mapMutations 方法将 Vuex store 中的 updateMessage 方法映射为组件中的方法,从而修改 Vuex store 中的数据。

  • 7、EventBus

EventBus 是一种自定义事件总线,可以用于在任意组件之间传递数据。在 EventBus 中,可以定义一个全局的事件中心,所有的组件都可以通过 $on 和 $emit 方法监听和触发自定义事件。

例如,定义一个 EventBus:

import mitt from 'mitt';

const bus = mitt();

export default bus;

 在组件中使用 EventBus:

<template>
  <div>{{ message }}</div>
  <button @click="updateMessage">Update message</button>
</template>

<script>
import bus from './event-bus';

export default {
  data() {
    return {
      message: 'Hello from component!'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'New message!';
      bus.emit('message-updated', this.message);
    }
  },
  created() {
    bus.on('message-updated', message => {
      console.log(message);
    });
  }
};
</script>

 

在这个例子中,组件中的 updateMessage 方法通过 EventBus 的 emit 方法触发了一个名为 message-updated 的自定义事件,并将修改后的消息作为参数传递给事件处理函数;同时,在组件的 created 生命周期钩子中,通过 EventBus 的 on 方法监听名为 message-updated 的自定义事件,并在事件处理函数中打印接收到的消息。

总之,Vue 3 中组件之间传值的方式很多,可以根据具体的场景选择最适合的方式。使用 props 和 $emit 可以实现父子组件之间的传值,使用 provide 和 inject 可以实现祖先组件向后代组件的传值,使用 Vuex 和 EventBus 可以实现任意组件之间的传值。在选择组件传值方式时,还应该考虑数据的安全性、可维护性和性能等因素。

四、Vue 2 和 Vue 3 组件之间传值的区别

Vue 2 和 Vue 3 之间在组件之间传递值的方法有一些不同之处。下面是一些主要的区别:

  1. Props

在 Vue 2 中,父组件通过 props 把数据传递给子组件。子组件可以在 props 选项中声明它们需要的 props,然后在组件的模板中使用它们。

在 Vue 3 中,props 的使用与 Vue 2 类似,但有一些重要的变化。首先,props 的声明方式已经发生了变化,现在使用 ES6 的解构语法来声明。其次,Vue 3 强制 props 的类型检查,并提供了更多的选项来控制 props 的行为,例如默认值和必需性等。

  1. Emit

在 Vue 2 中,子组件通过 emit 向父组件发送消息。子组件可以使用 this.$emit 方法触发一个自定义事件,并可以传递任意数据作为事件的参数。父组件可以监听子组件触发的事件,并在事件处理程序中处理传递的数据。

在 Vue 3 中,emit 的使用与 Vue 2 相似,但也有一些重要的变化。首先,Vue 3 引入了新的 setup() API,该 API 取代了 Vue 2 中的 created 和 mounted 等生命周期钩子函数。其次,emit 的使用方式已经改变,现在使用 v-model 代替 this.$emit。v-model 是一个语法糖,允许在父子组件之间双向绑定数据。

  1. Provide/Inject

在 Vue 2 中,父组件可以通过 provide 方法向子组件传递数据,子组件可以使用 inject 方法获取数据。provide 和 inject 允许在组件树中的任何地方传递数据,而不需要通过 props 一级一级地传递。

在 Vue 3 中,provide 和 inject 的使用方式与 Vue 2 相同。但是,Vue 3 提供了新的 reactive 和 readonly 方法,允许在 provide 中提供响应式的数据。这意味着,如果在 provide 中提供的数据发生变化,子组件中使用这些数据的地方也会相应地更新。

Vue 3 对于组件之间传递值的基本思想与 Vue 2 相似,但是有一些语法和 API 上的改变。这些变化旨在提供更好的类型检查、更好的性能和更好的开发体验。文章来源地址https://www.toymoban.com/news/detail-785299.html

到了这里,关于Vue 组件之间传值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue组件之间传值

    首先总结一下vue里面传值的几种关系: 如上图所示, A与B、A与C、B与D、C与F组件之间是父子关系; B与C之间是兄弟关系;A与D、A与E之间是隔代关系; D与F是堂兄关系,针对以上关系 我们把组件之间传值归类为: 1.父子组件之间的通讯 2.非父子组件之间的通讯(兄弟组件 隔代

    2024年02月09日
    浏览(38)
  • Vue 组件之间传值

    一、Vue 组件之间传值的主要方法 Vue 3 对于组件之间传递值的基本思想与 Vue 2 相似,但是有一些语法和 API 上的改变,主要的传值方法有以下几种: 1、父组件向子组件传值,使用 props:可以通过在子组件上绑定 props,然后在父组件中通过 v-bind 绑定相应的数据来传递数据。

    2024年02月02日
    浏览(39)
  • vue父子组件之间传值的方法

    父传子 方式: props 效果: 把父组件的 fatherName 属性传入子组件,在子组件中使用 父组件代码: 子组件代码: 子传父 方式: $emit 效果: 在子组件触发事件,修改父组件的fatherName属性 父组件代码: 子组件代码: 兄弟传值 方式: eventBus.js 效果: 任意组件之间相互传值 代

    2024年02月09日
    浏览(43)
  • vue2和vue3 子组件父组件之间的传值方法

    在组件化开发的过程中难免会遇见 子组件和父组件之间的通讯那么这里讲关于vue2和vue3不同的通讯方式 先看一下vue2 父组件向子组件传递参数 父组件通过 : 语法 其实就是v-bind 来传递参数 子组件通过 props 来获取父组件传递的方法 亿点小知识:子组件接收到数据之后,不能直接

    2024年02月09日
    浏览(45)
  • 史上最全的vue中组件之间的传值方式

    重中之重的就是组件之间数据传递的几种方式 Vue2最常见的11种组件间的通讯方式 props $emit / v-on .sync v-model ref(获取子组件的属性和调用子组件方法)本质就是获取到子组件的this $children / $parent(获取子组件(不包括顺孙组件)的数组 / 获取父组件的this) $attrs / $listeners($

    2024年02月03日
    浏览(40)
  • vue.js兄弟组件方法调用b组件调用a组件方法

    vue.js 中兄弟组件方法调用 场景:父组件中同时引入两个子组件(A和B),此时B组件点击按钮需要调用A组件里面的方法 方案1:vue的事件总线 方案2:自定义事件($emit) 最终方案:方案2 具体操作 B组件上添加一个自定义的事件,这个是B组件传递给父组件的 @getList=getlist A组件

    2024年02月13日
    浏览(42)
  • vue3-setup语法糖 - 父子组件之间的传值

    近期学习 vue3 的父子组件之间的传值,发现跟vue2的并没有太大的区别,然后发现网络上很少基于setup语法糖的教程,我这边总结一下,希望对大家有所帮助。 父组件向子组件传值的时候,子组件是通过props来接收的,然后以变量的形式将props传递到setup语法糖果中使用(defin

    2024年02月11日
    浏览(44)
  • Web前端 ---- 【vue】vue 组件传值(props、全局事件总线、消息的订阅与发布)

    目录 前言 父子组件 父传子 子传父 全局事件总线 什么叫全局事件总线 如何创建全局事件总线 如何在组件上获取到这个全局vc对象 最常用的创建全局事件总线 兄弟组件 消息订阅与发布 安装 使用 爷孙组件 在上篇文章我们介绍了父子组件之间的传值通信,本文将介绍不仅限

    2024年02月05日
    浏览(45)
  • 兄弟组件传值$on无法接收值

    方法一 前提是必须引入EventBus,而且该方法一刷新数据就没了 1.组件A里,点击事件里面使用$emit传入数据 2.组件A里,mounted里面使用$on接收数据,并把数据赋给EventBus         EventBus.$on(\\\'detail\\\',(data) = {                 EventBus.senddata = data }) 3.组件B里,在created里直接使用conso

    2024年02月05日
    浏览(29)
  • 07-Vue技术栈之(组件之间的通信方式)

    前言: 组件之间通信的方式有很多种,比如 props 、 自定义事件 、 全局事件总线 、 消息订阅与发布 、 父链与子组件索引 、 插槽 、 Vuex 等都可以实现组件之间的通信。在这里我将介绍以下三种通信方式。 它是一种组件间通信的方式,适用于: 子组件 === 父组件 使用场景

    2024年02月07日
    浏览(91)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包