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
  }
}

后代组件

<template lang="pug">
  .box
    ul
      li(v-for="i in arr", :key="i") {{ i }}
    a-button(@click="getUserInfo($event, 1000)")  点击调用getUserInfo函数
</template>
 
<script>
export default {
  name: "pug",
  inject: ["arr", "obj", "getUserInfo"],
};
</script>