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 共享给子组件