provide/inject提供了一種新的元件間通訊的方法。它允許父元件向子孫元件間進行跨層級的資料分發，但是provide/inject是非響應式的。一般用於子元件呼叫父元件的共有方法。它們兩個需要一起使用，允許一個祖先元件向其所有子孫後代注入一個依賴，不論元件層次有多深，並在起上下游關係成立的時間裡始終生效。

例項如下：

Test.vue：

<template>
  <div class="about">
    <h1>我是父元件:{{msg}}</h1>
    <button @click="changeMsg">點位改變</button>
    <test2></test2>
  </div>
</template>

<script>
import test2 from "./Test2";
export default {
  name: "Test",
  data() {
    return {
      msg: "你好啊"
    };
  },
  //給子元件傳遞資料和方法
  provide() {
    return {
      msg: this.msg,
      messageBox: this.messageBox
      
    };
  },
  components: {
    test2
  },
  methods: {
    changeMsg() {
      this.msg = "今天天氣轉暖";
    },
    messageBox(msg){
      alert(msg)
    }
  }
};
</script>

<style>
</style>
 

Test2.vue：

<template>
  <div><h3>我是子元件</h3>{{msg}}
  <button @click="message">我要執行父元件的方法</button>
  </div>
</template>

<script>
export default {
    name:'Test2',
    //接收父元件的資料
    inject:['msg','messageBox'],
    methods:{
        message(){
            this.messageBox('我是子元件')
        }
    }
   
}
</script>

<style>

</style>
 

當點選父元件中的按鈕時，父元件中的msg已經改變，但是子元件中接收的資料並未發生變化。這就說明這種方式共享資料不是響應式的，一般不使用這種方式傳遞資料。
當點選子元件中的按鈕時，會執行父元件的messageBox方法，是推薦的用法。