通过新建一个Vue事件的bus对象,然后通过bus.$emit来触发事件,bus.$on监听触发的事件。使用中央事件总线时,需要在手动清除它,不然它会一直存在,原本只执行一次的操作,将会执行多次。
具体代码如下:
``` // 父组件 <template> <div> <One /> <Two /> </div> </template> <script> import One from './one.vue'; import Two from './two.vue'; export default { data() { return { } }, components: { One, Two } } </script> // one组件 <template> <div> <h3>第一个组件</h3> <button @click="add">增加数量</button> </div> </template> <script> import {BUS} from './index.js'; export default { data() { return { } }, methods: { add() { BUS.$emit('add'); } }, beforeDestory() { BUS.$off('add'); } } </script> // two组件 <template> <div> <h3>第二个组件</h3> <h3>数量: {{num}}</h3> </div> </template> <script> import {BUS} from './index.js'; export default { data() { return { num: 1 } }, mounted() { BUS.$on('add', () => { this.num += 1; }) }, beforeDestroy() { BUS.$off('add'); } } </script> // index.js 创建的bus import Vue from 'vue'; export const BUS = new Vue({ }) ```
通过vuex来进行数据管理,具体内容见vuex官网
如果有什么不对的地方,或者还有什么方法我没有写到,希望大家可以提出来,谢谢。
总结
以上所述是小编给大家介绍的Vue组件之间通信的七种方式，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章: