vue3 父組件給子組件傳值 provide & inject

介紹

• provide() 和 inject() 可以實現嵌套組件之間的數據傳遞。
• 這兩個函數只能在 setup() 函數中使用。
• 父級組件中使用 provide() 函數向下傳遞數據。
• 子級組件中使用 inject() 獲取上層傳遞過來的數據。
• 不限層級

下面來看一個簡單的例子。

父組件

<template>
  <div>
    <provideAndInject />
  </div>
</template>

<script>
import { provide } from "@vue/composition-api";  // 父組件引入 provide
import provideAndInject from "./components/provideAndInject";  // 引入子組件

export default {
  name: "app",
  components: {
    provideAndInject
  },
  setup() {
    // provide('數據名稱', 要傳遞的數據)
    provide("customVal", "我是父組件向子組件傳遞的值"); 
  }
};
</script>

子組件

<template>
  <div>
    <h3>{{ customVal }}</h3>
  </div>
</template>

<script>
// 子組件導入 inject
import { inject } from "@vue/composition-api";

export default {
  setup() {
    //調用 inject 函數，通過指定的數據名稱，獲取到父級共享的數據
    const customVal = inject("customVal");

    return {
      customVal
    };
  }
};
</script>

補充

父組件可以通過ref創建響應式數據通過provide 共享給子組件