setip实现vue3父组件传值子组件

在 Vue 3 中，可以使用 `props` 来实现父组件向子组件传值。

首先，在父组件中定义要传递的值和子组件的模板：

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

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

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

在这里，我们定义了一个 `parentMessage` 数据属性，并将其传递给了子组件 `ChildComponent`。

接下来，在子组件中，我们可以使用 `props` 来接收父组件传递过来的值：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
};
</script>

在这里，我们定义了一个名为 `message` 的 `props`，并将其类型设置为 `String`。这样，我们就可以在子组件中使用 `message` 来访问父组件传递过来的值了。

最后，我们需要将子组件导出并在父组件中引入：

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

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

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

这样就完成了父组件向子组件传值的过程。