vue3子组件从父组件取值

在Vue 3中，子组件从父组件取值可以通过props属性来实现。props属性允许父组件向子组件传递数据，并且子组件可以在内部使用这些数据。

以下是实现子组件从父组件取值的步骤：

1. 在父组件中定义要传递给子组件的数据。可以通过props选项来定义props属性，并指定要传递的数据类型。

// 父组件
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

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

2. 在子组件中接收父组件传递的数据。可以通过props选项来声明接收的props属性。

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

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

在上面的例子中，父组件通过`:message="parentMessage"`将`parentMessage`的值传递给子组件的`message`属性。子组件通过`props`选项声明了一个名为`message`的属性，并指定了它的类型为字符串。

这样，子组件就可以在内部使用`message`属性的值了。