Fork me on GitHub

vue组件通信的方式总结

父子组件通信

父组件通过 props 向子组件传递数据,子组件通过执行父组件的方法,通知父组件子组件所发生的变化。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 父组件
<one-address :addressitems="addressitems" @edit-address="editAddress"></one-address>

// 子组件
<div>{{ addressitems.partment }}{{ addressitems.address }}</div>
export default {
props: {
addressitems: Object
},
methods: {
editAddress () {
this.$emit('edit-address', false)
}
}
}

非父子组件通信

非父子组件通信同样也可以用Vue.$emit自定义事件来解决
1
2
3
4
5
6
7
var bus = new Vue();
// 组件A
bus.$emit('id-selected', 1);
// 组件B
bus.$on('id-selected', function (id) {
console.log(id)
});

vue跨组件跨模块通信

使用 vuex
vuex有四个核心概念,其中state和getters主要是用于数据的存储与输出,
而mutations和actions是用于提交事件并修改state中的数据。
这里盗取vuex官网图,需要详细了解请访问[vuex](https://vuex.vuejs.org)

vuex原理图

参考文档:
vue组件之间的多种通信方法
vue组件之间的通信(一)

-------------本文结束感谢您的阅读,如果本文对你有帮助就记得给个star-------------
Donate comment here