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