vue3父组件传值给子=＞子组件

vue3父组件传值给子=>子组件

# 原理

使用 Provide / Inject，官方文档

App.vue（父组件）

/src/App.vue

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";

import { provide } from "vue";

// provide(name, value);
provide('name', 'my is vue3');
provide('info', {
  version: 3,
});

</script>

<template>
  <HelloWorld msg="Hello Vue 3" />
</template>

<style>
</style>

HelloWorld.vue（子组件）

/src/components/HelloWorld.vue

<script setup lang="ts">
import { inject } from 'vue';

// 第一个参数是: 要 inject 的 property 的 name
// 第二个参数是: 默认值 (可选)
const name = inject('name', 'default name');
const info = inject('info');

</script>

<template>

  <h2>{{ name }}</h2>

  <h2>{{ info.version }}</h2>
</template>

<style scoped>
</style>