provide和inject用法


-provide和inject是成对出现的,用于父组件向子孙组件传递数据
-provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量
需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

父组件
export default {
  name: 'App',
  data(){
    return{
      arr:["张三","李四","王五"],
      obj:{
        id:"001",
        num:80
      }
    }
  },
  /* 
    1.函数返回对象的写法 
    2.对象的写法,只能传递基本数据类型,
      如果传递对象、数组或方法,后代接收不到,需要使用函数返回对象的写法
  */
  provide(){
    return{
      arr:this.arr,
      obj:this.obj,
      getUserInfo:this.getUserInfo
    }
  },
  methods:{
    getUserInfo(e,value){
      console.log("获取用户信息",e.target,value);
    }
  },
  components: {
    HelloWorld,
    layout
  }
}

后代组件





vue