【知识分享】Vue组件之间数据的传递
在 Vue 中，组件之间数据的传递可以通过 props、$emit 和事件总线等方式实现。下面我将为你讲解这些方式，并提供相应的代码示例。
（1）使用 Props 进行父子组件间的数据传递：
父组件可以通过 props 将数据传递给子组件。子组件可以接收父组件传递过来的数据，并在自身内部使用。以下是一个简单的示例：
父组件 Parent.vue：
import Child from './Child.vue';
export default {
components: {
Child
},
data() {
return {
parentMessage: 'Hello from parent'
};
}
};
子组件 Child.vue：
{{ message }}
export default {
props: ['message']
};
（2）使用 $emit 进行子父组件间的数据传递：
子组件可以通过 $emit 触发自定义事件，并向父组件传递数据。父组件可以监听子组件触发的事件，并获取传递过来的数据。以下是一个简单的示例：
子组件 Child.vue：
Send Message to Parent
export default {
methods: {
sendMessageToParent() {
this.$emit('child-message', 'Hello from child');
}
}
};
父组件 Parent.vue：
import Child from './Child.vue';
export default {
components: {
Child
},
methods: {
handleChildMessage(message) {
console.log(message); // 输出：Hello from child
}
}
};
（3）使用事件总线进行非父子组件间的数据传递：
Vue 实例可以作为事件总线，用于在任意两个组件之间进行通信。以下是一个简单的示例：
创建 EventBus.js：
import Vue from 'vue';
export const bus = new Vue();
组件 A：
Send Message
import { bus } from '@/EventBus.js';
export default {
methods: {
sendMessage() {
bus.$emit('custom-event', 'Hello from component A');
}
}
};
组件 B：
import { bus } from '@/EventBus.js';
export default {
created() {
bus.$on('custom-event', message => {
console.log(message); // 输出：Hello from component A
});
}
};
这些是在 Vue 组件之间传递数据的常见方法和示例。
