vue数据通信：
几种通信方式无外乎以下几种：
Prop（常用）
$emit (组件封装用的较多)
.sync语法糖 （较少）
attrs & $listeners (组件封装用的较多)
provide & inject （高阶组件/组件库用的较多）
slot-scope & v-slot （vue@2.6.0+）新增
scopedSl
父组件向子组件
通过 props 传递父组件数据和事件，或者通过 $emit 和 $on 实现事件传递
通过 ref 属性，调用子组件方法，传递数据；
通过 props 传递父组件数据和事件，或者通过 $emit 和 $on 实现事件传递
通过 this.$parent.$data 或者 this.$parevent._data 获取父组件数据，通过
this.$parent 执行父组件方法
子组件向父组件
this.$emit()
兄弟组件
通过 eventBus 挂在全局事件
利用 parent 进行数据传递， parent.$children 调用兄弟组件事件
注意：1使用 eventBus 不需要的时候须移除
多级嵌套组件数据通信
attrs 和 listeners
attrs 是一个属性集合，而 listeners 是一个事件集合，两者都是 以对象的形式来保存数据，
A组件代码更新如下
<template>
<div>
<child-dom
:foo="foo"
:coo="coo"
v-on:upRocket="reciveRocket"
>
</child-dom>
</div>
</template>
<script>
import childDom from "@/components/ChildDom.vue";
export default {
name:'demoNo',
data() {
return {
foo:"Hello, world",
coo:"Hello,rui"
}
},
components:{childDom},
methods:{
reciveRocket(){
console.log("reciveRocket success")
}
}
}
</script>
b组件更新如下
<template>
<div>
<p>foo:{{foo}}</p>
<p>attrs:{{$attrs}}</p>
<childDomChild v-bind="$attrs" v-on="$listeners"></childDomChild>
</div>
</template>
<script>
import childDomChild from './childDomChild';
export default {
name:'child-dom'
props:["foo"],
inheritAttrs:false, // 组件标签内所绑定的属性
}
</script>
c组件更新如下
<template>
<div>
<p>coo:{{coo}}</p>
<button @click="startUpRocket">我要发射火箭</button>
</div>
</template>
<script>
export default {
name:'childDomChild',
props:['coo'],
methods:{
startUpRocket(){
this.$emit("upRocket");
console.log("startUpRocket")
}
}
}
</script>
