Vue中inject與provide的用法

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方法，是推薦的用法。