Vue 组件之间的传值是构建复杂应用的基础。以下是 Vue 组件之间传值的不同方式：
1.父组件向子组件传值
父组件可以通过 props 向子组件传递数据。
步骤
定义 props：在子组件中定义它期望接收的 props。
传递数据：在父组件的模板中，将数据绑定到子组件的 props 上。
<!-- 父组件 -->
<template>
<div>
<ChildComponent :user="userData" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
userData: {
name: 'Alice',
age: 25
}
};
}
};
</script>
<!-- 子组件 -->
<template>
<div>
<p>{{ user.name }}</p>
<p>{{ user.age }}</p>
</div>
</template>
<script>
export default {
props: ['user']
};
</script>
2.子组件向父组件传值
子组件可以通过自定义事件向父组件发送消息。
步骤
触发事件：在子组件中使用 $emit 方法触发一个事件，并传递数据。
监听事件：在父组件中监听这个事件，并定义一个方法来接收数据。
<!-- 子组件 -->
<template>
<button @click="sendDataToParent">Send Data</button>
</template>
<script>
export default {
methods: {
sendDataToParent() {
this.$emit('data-sent', { message: 'Hello from child!' });
}
}
};
</script>
<!-- 父组件 -->
<template>
<div>
<ChildComponent @data-sent="receiveData" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
receiveData(data) {
console.log(data.message); // 输出: Hello from child!
}
}
};
</script>
3. 非父子组件之间的传值
对于非父子关系的组件，可以使用以下方法进行通信：
a. 事件总线 (Event Bus)
创建一个空的 Vue 实例作为中央事件总线，用于非父子组件之间的通信。
步骤
创建事件总线：创建一个简单的 Vue 实例。
发送事件：在发送方组件中使用 $emit 触发事件。
接收事件：在接收方组件中使用 $on 监听事件。
b. Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。
步骤
定义状态：在 Vuex 中定义全局状态。
提交状态变更：通过提交 mutations 或 actions 来修改状态。
获取状态：在任何组件中通过 mapState 辅助函数或直接访问 $store.state 来获取状态。
c. Provide / Inject
Vue 2.2.0+ 提供了 provide 和 inject 选项，用于父组件向所有子孙组件提供数据。
步骤
提供数据：在父组件中使用 provide 选项提供数据。
注入数据：在子孙组件中使用 inject 选项注入数据。
4. 跨组件通信的其他高级方法
Vue.observable：使一个对象可响应。
$refs：用于访问组件实例或 DOM 元素。
$root：访问根组件实例。
总结
Vue 提供了多种方式来实现组件之间的数据传递，每种方式都有其适用场景。父组件向子组件传值使用 props，子组件向父组件传值使用自定义事件，非父子组件之间传值可以使用事件总线、Vuex 或 Provide/Inject 等方法。
根据应用的具体需求选择合适的方法是构建高效、可维护的 Vue 应用的重要部分。