Vue3的父页面传值到子页面

在Vue3中，从父组件向子组件传递数据通常通过props（属性）的方式来进行。父组件可以将需要的数据作为props定义好，然后在模板中把它们作为属性绑定到子组件上。以下是基本步骤：

1. **创建父组件**：在父组件的script部分，定义一个props的对象，指定需要传给子组件的属性名和类型。

<template>
  <div>
    <child-component :value="parentValue" />
  </div>
</template>

<script>
export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentValue: '默认值', // 或者是一个对象、数组或其他类型的数据
    };
  },
};
</script>

2. **定义子组件**：在子组件的script部分，通过props接收父组件传来的数据。

<template>
  <div>{{ value }}</div> <!-- 使用prop "value" 显示接收到的数据 -->
</template>

<script>
import { Prop, Component } from '@vue/composition-api'; // 使用Composition API

@Component
export default {
  props: {
    value: String, // 指定prop的数据类型，这里是字符串，根据实际需求调整
  },
};
</script>

当你需要修改父组件传给子组件的数据时，只需要改变父组件data中的值即可，子组件会自动更新显示的内容。