vue父子通信的方式

最近团队在做 Vue项目代码层面上的优化。在此整理下vue父子组件通信的方式。

大纲：

几种通信方式无外乎以下几种：

• Prop(常用)
• $emit (组件封装用的较多)
• .sync语法糖 （较少）
• $attrs & $listeners (组件封装用的较多)
• provide & inject （高阶组件/组件库用的较多）
• slot-scope & v-slot （vue@2.6.0+）新增
• scopedSlots 属性
• 其他方式通信

1.Prop-----太常用了，本文不在赘述

2.触发当前实例上的事件。附加参数都会传给监听器回调。

父组件：
<div id="app"> <my-button @greet="sayHi"></my-button> </div>

子组件：
<button @click="triggerClick">click</button>

在子组件内
triggerClick () {
      this.$emit('greet', this.greeting)
    }

3. .sync 修饰符

<div :na