1. vue-property-decorator官网文档：
https://www.npmjs.com/package/vue-property-decorator#Provide
一、父子孙通信（跨级通信）
1、Bus
2、Vuex
3、provide / inject
4、$attrs / $listeners
1、Provide & Inject
1. @Provide(key?: string | symbol)
@Inject(options?: { from?: InjectKey, default?: any } | InjectKey)
2. 响应式（传的数据在父组件中改变后，子组件能获取到最新的）传值需使用：ProvideReactive & InjectReactive
vue2+ts用法：
// 父组件
<script lang="ts">
import { Provide, ProvideReactive } from 'vue-property-decorator'
@Provide() sonData = '测试数据'
@Provide('pTwo') two = 'twoFromProvide'
@ProvideReactive() storeId = ''
created() {
this.storeId = 'xxx'
}
</script>// 子、孙组件：都可以使用Inject获取对应的Provide的数据。
import { Inject } from 'vue-property-decorator'
@Inject('sonDate') sonDate!: string;
@Inject({ from: 'pTwo', default: '我是默认值' }) readonly pTwo!: string
@InjectReactive() readonly storeId!: string
created() {
console.log(this.storeId, '父传孙了且是响应式的') // 'xxx'
}
console.log(this.sonData) // '测试数据'
二、父子通信
1、父向子传递数据是通过 props，子向父是通过 events（$emit）
2、通过父链 / 子链也可以通信（$parent / $children）
3、ref 也可以访问组件实例
4、provide / inject
5、$attrs/$listeners
-
.sync
修饰符
在子组件中动态修改父组件的某个变量值
// 父组件使用.sync修饰符（也可改变父组件某个对象的值）
<child :list.sync="parentForm.imgsList"></child>// 子组件使用 Update:prop名 方法更新父组件值
updateParantVal(){
this.$emit('update:list', ['xxx', 'xxx'])
}
2. $attrs 、$listeners属性
$attrs：继承所有的父组件属性（除了 prop 传递的属性、class 和 style ）
$listeners：包含了作用在这个组件上的所有监听器事件。
<div v-bind="$attrs" v-on="$listeners">这是子组件中的页面元素</div>
三、兄弟组件通信
1、Bus
2、Vuex
参考链接：
-
Vue中 $attrs、$listeners 详解及使用（包含其他常见父子孙通信）：
https://blog.csdn.net/ZYS10000/article/details/116017711