Vue2 组件11种通信方式 续更

1.props

2.$emit

3.$refs

4.$parent 

5.$bus  vue3废弃

6.vuex

7.provide inject

8. 插槽

9.路由传参

10. $attrs / $listener   vue3废弃

11.v-model     语法糖  .sync

7.provide inject

这种方式最大的优点是可以一直在后代组件注射祖先组件传递的值

对象形式：传递的时候 不能用this ，只能写死 ，比较鸡肋

 provide:{
     xxx':'xxx'
  },

函数形式：类似 data 的写法 

provide() {
    return {
      test: this.d1,
      num:this.num,
    };
  },

缺点 ： 传递后代的 值不是响应式

 父组件
 <button @click="num++">父组件改变num{{ num }} </button>
  data() {
    return {
      d1: "传给子组件",
      num:1
    };
  },

  provide() {
    return {
      test: this.d1,
      num:this.num,
    };
  },

子组件
 <h1>{{  num }}</h1>
 inject:['num']


孙组件
 <h1>{{  num }}</h1>
 inject:['num']

解决的方式 就是把祖先 组件实例传过去 

provide() {
    return {
      test: this.d1,
      num:this.num,
      $this:this
    };
  },

 父组件
 <button @click="num++">父组件改变num{{ num }} </button>
  data() {
    return {
      d1: "传给子组件",
      num:1
    };
  },

  provide() {
    return {
      test: this.d1,
      num:this.num,
      $this:this
    };
  },

子组件
 <h1>{{  $this.num }}</h1>
 inject:['$this']


孙组件
 <h1>{{  $this.num }}</h1>
 inject:['$this']