vue3中福子组件传值, 子组件如何接收

在Vue 3中，父组件向子组件传递值有两种常见的方式：props和provide/inject。下面我会分别介绍这两种方法。

1. 使用props传值：
在父组件中，通过在子组件标签上绑定属性的方式传递值，子组件需要在props选项中声明接收的属性。例如：

// 父组件
<template>
  <div>
    <ChildComponent :message="message" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent component!'
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>

在上述例子中，父组件通过`:message="message"`将`message`属性的值传递给子组件，子组件通过props选项中声明的`['message']`来接收这个值，在子组件内部可以直接使用`message`来访问父组件传递过来的值。

2. 使用provide/inject传值：
在父组件中，通过provide选项提供一个值，然后在子组件中使用inject选项接收这个值。例如：

// 父组件
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const message = 'Hello from parent component!';
    provide('message', message);
  }
}
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');
    return {
      message
    }
  }
}
</script>

在上述例子中，父组件通过`provide('message', message)`提供了一个名为`message`的值，子组件通过inject选项中接收这个值。在子组件的setup函数中使用`const message = inject('message')`来接收父组件提供的值，并将其返回，然后在子组件的模板中可以直接使用`message`来访问这个值。

这些是Vue 3中父组件向子组件传值的两种常见方法，你可以根据具体的需求选择适合你的方式来实现子组件接收值的功能。