vue组件间传值

在Vue中，组件间传值是常见的需求，主要有以下几种方式：

1. props：父组件可以通过props向子组件传递数据。子组件在props中定义接收的数据，并在模板中使用。 ```javascript // 父组件

// 子组件 export default { props: , template: `{{ message }}` } ```

2. $emit：子组件可以通过$emit向父组件发送事件，并携带数据。父组件监听这些事件并处理。 ```javascript // 子组件 this.$emit;

// 父组件

methods: { handleMessage { console.log; } } ```

3. $refs：在父组件中引用子组件，可以直接访问子组件的实例和数据。 ```javascript // 父组件

mounted { console.log; } ```

4. $parent：子组件可以直接访问父组件的实例和数据。 ```javascript // 子组件 console.log; ```

5. Event Bus：使用一个空的Vue实例作为中央事件总线，用于组件间通信。 ```javascript // eventbus.js import Vue from 'vue'; export const EventBus = new Vue;

// 组件A EventBus.$emit;

// 组件B EventBus.$on => { console.log; }qwe2; ```

6. Vuex：对于大型应用，可以使用Vuex进行状态管理，实现跨组件的数据共享。 ```javascript // store.js import Vue from 'vue'; import Vuex from 'vuex';

Vue.use;

export default new Vuex.Store { state.message = message; } } }qwe2;

// 组件A this.$store.commit;

// 组件B console.log; ```

选择哪种方式取决于具体的应用场景和需求。在实际开发中，可以根据项目规模和复杂度灵活选择。