vue组件通信方式（多种方案）

一、Props传递数据

components

　　|-Grandson1.vue //孙子1
　　|-Grandson2.vue //孙子2
　　|-Parent.vue //父亲
　　|-Grandson1.vue //儿子1
　　|-Grandson1.vue //儿子2

在父组件中使用儿子组件

<template>

　　<div>
　　　　父组件：{{money}}
　　　　<Son1 :money="money"><Son1>
　　</div>

</template>

<script>
　　import Son1 from ''./Son1";
　　export default{
　　　　components:{

　　　　　　Son1
　　　　},

　　　　data(){
　　　　　　return { money: 100};
　　　　}
　　};
</script>
子组件接受数据

props:{
　　value:{
　　　　type:Number,

　　　　default:1
　　}
}

如果是数组

props:{
　　value:{
　　　　type:Array,

　　　　default: ()=>[]
　　}
}

二、$emit使用
子组件触发父组件方法，通过回调的方式将修改的内容传递给父组件

父组件

<template>

　　<div>
　　　　父组件：{{money}}
　　　　<Son1 :money="money" @input="change"><Son1>
　　</div>

</template>

<script>
　　import Son1 from ''./Son1";
　　export default{
　　　　methods:{
　　　　　change(data){
　　　　　　 this.money = data
　　　　　 }　
　　　　},
　　　　components:{
　　　　　　Son1
　　　　},

　　　　data(){
　　　　　　return { money: 100};
　　　　}
　　};
</script>

子组件触发绑定自己身上的方法

<template>

　　<div>
　　　　子组件1：{{money}}
　　　　<button @click="$emit('input',200)">修改父组件的值<Son1>
　　</div>

</template>

<script>
　　export default{
　　　　props:{
　　　　　money:{
　　　　　　 type:Number
　　　　　}
　　　　}

　　};
</script>

同步父子组件的数据=>语法糖的写法

.sync
<Son1 :money:sync="money"></Son1>
<--触发的事件名 update:(绑定.sync属性的名字)-->
<button @click="$emit('update:money',200)">更改</button>

v-model
<Son1 v-model="money"></Son1>

<template>

　　<div>
　　　　子组件1：{{value}}//触发的时间只能是input
　　　　<button @click="$emit('input',200)">修改父组件的值<Son1>
　　</div>

</template>

<script>
　　export default{
　　　　props:{
　　　　　value:{ //接收到的属性名只能叫value
　　　　　　 type:Number
　　　　　}
　　　　}

　　};
</script>

三、$parent、$children
多层级传递

<Grandson1 :value="value"></Grandson1>

<template>

　　<div>
　　　　孙子1：{{value}}
　　　　<---调用父组件的input事件-->
　　　　<button @click="$parent.$emit('input',200)">更改<Son1>
　　</div>

</template>

<script>
　　export default{
　　　　props:{
　　　　　value:{ 
　　　　　　 type:Number
　　　　　}
　　　　}

　　};
</script>

如果层级很深就会出现$parent.$parent...这里封装一个$dispach方法进行向上派发
$dispatch
Vue.prototype.$dispatch = function $dispatch(eventName, data){
　　let parent  = this.$parent;
　　while (parent）{
　　　　parent.$emit(eventName,data){
　　　　　　parent.$emit(eventName,data);
　　　　　　parent = parent.$parent;
　　　　}
　　}
}
$broadcast 向下派发
Vue.prototype.$broadcast = function $broadcast(eventName, data){
　　const broadcast  = function () {
　　　　this.$children.forEach((child)=>{
　　　　　　child.$emit(eventName, data);

　　　　　　if(child.$children){
　　　　　　　　$broadcast.call(child,eventName,data);
　　　　　　}
　　　　})
　　}
　　broadcast.call(this,eventName,data);
}

四、$attrs、 $listeners
$attrs批量向下传入属性
<Son2 name="小明" age="18"></Son2>
<--可以在son2组件中使用$attrs,可以将属性继续向下传递-->
<div>
　　儿子2：{{  $attrs.name }}
　　<Grandson2  v-bind="$attrs"></Grandson2>
</div>
<tempalte>
　　<div>孙子：{{$attrs}}</div>
</template>

$listeners批量向下传入方法
<Son2 name="小明" age="18" @click=“()=>{this.money  =500}”></Son2>

<--可以在son2组件中使用$attrs,可以将属性继续向下传递-->

<Grandson2  v-bind="$attrs" v-on="$listeners"></Grandson2>

<button @click="$listeners.click()">更改<Son1>

五、Provide&Inject

Provide 在父级中注入数据
provide(){

　　return {parentMsg:'父亲'}；

}
Inject
在任意子组件中可以注入父级数据
inject：['parentMsg']//会将数据挂载在当前实例上

六 ref使用
获取组件实例
<Grandson2  name="花花" ref="grand2"></Grandson2>

mounted(){
　　console.log(this.$refs.grand2.name);
}

七 EventBus

用于跨组件通知(简单项目)

Vue.prototype.$bus = new Vue();
Son2组件和Grandson1互相通信
mounted() {
　　//父亲组件注册
　　this.$bus.$on('my',data=>{

　　　　console.log(data)
　　})
}

mounted(){
　　//侄子组件调用

　　this.$nextTick(()=>{

　　　　this.$bus.$emit('my',"我是小红”);
　　})

}

八 vuex状态管理