vue通信方式简介
在Vue.js中，组件间通信可以通过props、$emit、事件总线、Vuex以及Provide/Inject等方式来实现，总的来说，组件通信是现代前端开发中不可或缺的一部分，它可以帮助开发者构建更加模块化、可维护和可扩展的应用。
Props / $emit：
- Props：通过props属性将数据从父组件传递给子组件。
- $emit：在子组件中通过$emit方法触发自定义事件，父组件可以监听这些事件来接收子组件传递的数据。
事件总线（Event Bus）：
- 创建一个空的Vue实例作为事件总线，在需要通信的组件中都可以通过该实例进行事件的触发和监听。
- 可以使用
$on方法监听事件，使用$emit方法触发事件。
Vuex：复杂的单页应用数据管理
- Vuex是Vue.js的官方状态管理工具，适用于大型应用中组件间的状态共享和通信。
- 它通过一个全局的store来管理应用的状态，并提供了一系列的API来实现状态的读取、修改和监听。
Provide / Inject：
- 父组件通过provide选项提供数据，子组件通过inject选项来注入这些数据。
- 这种方式可以实现跨层级组件间的通信，但要注意不要滥用，以免造成组件间的耦合度过高。
以上具体使用哪种方式取决于你的项目需求和组件之间的关系。对于简单的通信，可以使用props / $emit；对于较复杂的状态管理和多组件之间的通信，可以考虑使用Vuex；对于跨层级的通信或者跨多个组件的通信，可以考虑使用Provide / Inject或事件总线。
一、props
方法一：props
使用props，父组件可以使用props向子组件传递数据。
父组件vue模板father.vue
<template>
<child :msg="message"></child>
</template>
<script>
import child from './child.vue';
export default {
components: {
child
},
data () {
return {
message: 'father message';
}
}
}
</script>子组件vue模板child.vue
<template>
<div>{{msg}}</div>
</template>
<script>
export default {
props: {
msg: {
type: String,
required: true
}
}
}
</script>方法二 使用$children 【使用$children可以在父组件中访问子组件。】
二、子组件向父组件通信
方法一:使用vue事件
父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件。
父组件vue模板father.vue
<template>
<child @msgFunc="func"></child>
</template>
<script>
import child from './child.vue';
export default {
components: {
child
},
methods: {
func (msg) {
console.log(msg);
}
}
}
</script>子组件vue模板child.vue
<template>
<button @click="handleClick">点我</button>
</template>
<script>
export default {
props: {
msg: {
type: String,
required: true
}
},
methods () {
handleClick () {
//........
this.$emit('msgFunc');
}
}
}
</script>方法二： 通过修改父组件传递的props来修改父组件数据
这种方法只能在父组件传递一个引用变量时可以使用，字面变量无法达到相应效果。因为饮用变量最终无论是父组件中的数据还是子组件得到的props中的数据都是指向同一块内存地址，所以修改了子组件中props的数据即修改了父组件的数据。【不建议】
方法三：使用$parent使用--->$parent可以访问父组件的数据。
三、非父子组件、兄弟组件之间的数据传递
非父子组件通信，Vue官方推荐使用一个Vue实例作为中央事件总线。
Vue内部有一个事件机制，可以参考源码。
$on方法用来监听一个事件。
$emit用来触发一个事件。
/*新建一个Vue实例作为中央事件总嫌*/
let event = new Vue();
/*监听事件*/
event.$on('eventName', (val) => {
//......do something
});
/*触发事件*/
event.$emit('eventName', 'this is a message.');四、多层级父子组件通信：
在Vue1.0中实现了$broadcast与$dispatch两个方法用来向子组件（或父组件）广播（或派发），当子组件（或父组件）上监听了事件并返回true的时候会向爷孙级组件继续广播（或派发）事件。但是这个方法在Vue2.0里面已经被移除了。
其实这两个方法内部实现还是用到的还是$parent以及$children，用以遍历子节点或是逐级向上查询父节点，访问到指定组件名的时候，调用$emit触发指定事件。
