vue中的 provide 和 inject

复习

1.什么是provide和inject

    父子组件内传值我们经常用props来实现，但是当层级比较深的时候，我们虽然可以同样用props来实现，但是不免有些繁琐，vue提供了一种方法来实现这种功能；
    官方的解释是：一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。

2.使用

//父组件 
  export default { 
  //1静态数据 
     provide:{ message:'hello' } 
  //2动态 
  data(){ 
    return { 
      message:'hello' 
           } 
       } 
  provide(){
     return {
       message:this.message 
       //获取数据 
       message:computed(()=>{this.message}) //响应式 
            } 
          } 
       } 
  <template> 
     <input v-model='message'/> 
  </template> 
  
  
  //孙子组件 
  export default { 
    //1.this.message 获取 
    inject:['message'] 
    //2.别名获取 this.localMessage 
    inject:{ 
       localMessage:{ 
           from:'message' //from 注入来源 
           default:'hello' //默认值 
           default:()=>{{name:'hello'}} 
           //对于非基础数据类型，或者确保每个组件有单独的数据，用工厂函数。
           } 
         }
        }