Vue2的依赖注入(跨级通信)基本使用

provide(提供) ，inject(注入)  祖先级组件用provide传递数据,它的所有后代都可以通过inject取到数据

使用演示：

//祖先组件
<template>
 <div>
   父组件传的值：{
   
   {num}}
</div>
</template>
 
<script>
//导入子组件
import Son from '@/component/Son'
export default{
 data(){
   return{
     num:10
   }
  },
 
//祖先级组件把要传递的数据放入provide里
provide(){  
   return{
      num:this.num
  },
}
}
</script>
 

//儿子组件
<template>
  <div>
    子组件接收传来的值:{
   
   {num}}
  </div>
</template>
 
<script>
//导入孙子级别组件
import Grandson from '@/component/Grandson'
  export default{
   //后代组件可以通过inject拿到数据
   inject:['num']
}
</script>

//孙子组件
<template>
   <div>
    孙子组件接收传来的值:{
   
   {num}}
  </div>
</template>
 
<script>
 export default{
   //后代组件可以通过inject拿到数据
  inject:['num']
 
}
</script>

但是依赖注入的数据默认不是响应式的，祖先级别组件修改数据，其他使用到这个数据的组件不会同步

我点击按钮使祖先组件的num值+1，只有祖先组件的num值变了

使依赖注入的数据成为响应式的：

 第一种方法(把要传的数据放在对象里)：

<template>
  <div>
    父组件传的值：{
   
   { obj.num }} <br />
    <Son></Son>
    <button @click="addNum">+1</button>
  </div>
</template>
 
//再祖先组件里把要穿的数据放在一个对象里
export default{
 
 data(){
    return{
      obj:{
          num:10   
        }      
    }
 },
 
provide(){
   return{
     //把这个对象传过去
     obj:this.obj
   }
 },
 
methods: {
    addNum () {
      this.obj.num++
    }
}

<template>
 <div>
   {
   
   {obj.num}}
 </div>
<//template>
 
//孙子组件
export default{
  inject:['obj']
}

此时再祖先组件里修改num数据，所有使用到这个数据的组件都会同步

 第二种方法，传递一个参数用方法返回

//祖先组件
export default{
  data(){
    return{
      age:6
    }
  },
 
 provide(){
   return{
     age(): => this.age
   }
  }
}

<template>
  <div>
    {
   
   {age()}}
 </div>
</template>
 
//孙子组件
export default{
  inject:['age']
}