vue3 父组件向子组件传递参数

父组件

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