Vue.js 组件实例的作用域是相互独立的,不同组件之间的数据不能互相访问,组件有父级组件、子级组件、兄弟组件,如何选择组件之间的通信方式?针对常用的 props、$emit/$on、vuex、$parent/$children、$attrs/$listeners、provide/inject 进行讲解,对比各自的区别以及使用场景。
1. props
子组件使用props 接收父组件传递的值,子组件通过 $emit ,让父组件接收事件,改变父组件的data里面的值;
代码示例:
-
<!--父组件--> <template> <title :title='title' @change='changeHandle'></title> </template> <script> export default { data() { return { title: '123' }; }, components: { title }, methods: { changeHandle(val) { this.title = val; } } } </script> <!--子组件--> <template> <div @click='changeHandle'>{ {title}}</div> </template> <script> export default { props: { title: String }, methods: { changeHandle() { this.$emit('change', '456'); } } } </script>
子组件通过事件向父组件传递值,父组件更改自己的数据,子组件接收更改后的值;
2. $emit/$on
通过Vue 的实例触发事件和监听事件,实现了跨级组件的通信;
代码示例:
-
<!--在Vue的原型链上添加$bus 属性,赋值为Vue实例--> const EventBus = new Vue(); Object.defineProperties(Vue.prototype, { $bus: { get() { return EventBus; } } }); window.globalVue = EventBus; <!--使用--> // 组件A <template> <div @click='changeHandle'>触发事件</div> </template> <script> export default { methods: { changeHandle() { window.globalVue.$emit('change', '456'); } } } </script> // 组件 B <template> <div>监听事件</div> </template> <script> export default