vue中provide和inject的用法

vue中provide和inject的用法

1、provide与inject的功能

通过provide与inject，可以把一个祖先组件指定的数据和方法，传递给其所有子孙后代

provide 和 inject 主要在开发高阶插件/组件库时使用

2、使用示例

3个组件 A(父级)、B(子级)、C(孙子级)

父组件A ---- 通过provide指定传递给子孙组件的值

2、使用示例

3个组件 A(父级)、B(子级)、C(孙子级)

父组件A ---- 通过provide指定传递给子孙组件的值

export default {
  provide() {     // provide是一个匿名函数，返回一个对象
    return {
      reload: this.reload，
      msg:this.msg      
    };
  },
  data(){
    return {
      msg:'hello world!' 
   }
  },
  methods: {
    reload() {
      console.log("C调用A的方法！");
    },
  },
},

子/孙组件 ---- 通过inject 获取祖先组件传递过来的值

export default {
 //inject: ["reload","msg"],   简写
  inject:{                  // 详细指定来源以及默认值
     msg:{
        from:'A',   //表示从组件A传递过来的
        default:'a default msg'
     },
     reload:{
        from:'A'
     }
  },
  mounted() {
    this.reload();
  },
},