vue父子通信的方式

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

大纲：

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

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

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

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

父组件：
  

子组件：
click

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

3. .sync 修饰符

 

this.$emit('update:name', newVal)

update:name 其中 name 表示要更新的 prop 值。当然如果你不用 .sync 语法糖使用上面的 .$emit 也能达到同样的效果。

4. $attrs & $listeners

$attrs-----包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

$listeners-----包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

个人理解：通常这两个是配套使用；$attrs可以取到父组件的属性集合；$listeners可以取到父组件的事件集合。

5. provide & inject

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。并且这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

let Son = Vue.extend({
  template: '
son
',
  inject: {
    house: {
      default: '没房'
    },
    car: {
      default: '没车'
    },
    money: {
      // 长大工作了虽然有点钱
      // 仅供生活费，需要向父母要
      default: '￥4500'
    }
  },
  created () {
    console.log(this.house, this.car, this.money)
    // -> '房子', '车子', '￥10000'
  }
})

new Vue({
  el: '#app',
  provide: {
    house: '房子',
    car: '车子',
    money: '￥10000'
  },
  components: {
    Son
  }
})

6.   v-slot   scopedSlots 属性

• 作用相同：都是作用域插槽
• 场景不同：v-slot是模板语法，scopedSlots 则是编程式语法
• 使用不同：在