淺談vue中provide和inject 用法

1、provide與inject的功能

通過provide與inject，可以把一個祖先元件指定的資料和方法，傳遞給其所有子孫後代

provide 和 inject 主要在開發高階插件/元件庫時使用

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();
  },
},
           

參考連結：https://cn.vuejs.org/v2/api/#provide-inject