vue 3 props 使用示例代码

当使用 Vue 3 的组件开发时，可以通过 `props` 来传递数据给子组件。下面是一个 Vue 3 中使用 `props` 的示例代码：

<template>
  <div>
    <h1>{{ message }}</h1>
    <ChildComponent :name="name" :age="age" />
  </div>
</template>

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

export default defineComponent({
  name: 'ParentComponent',
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: 'Hello from ParentComponent!',
      name: 'John',
      age: 25,
    };
  },
});
</script>

在这个示例中，`ParentComponent` 是父组件，它通过 `props` 将数据传递给子组件 `ChildComponent`。子组件可以通过在模板中使用 `:name` 和 `:age` 来接收父组件传递的数据。

注意，在子组件中，需要使用 `props` 关键字声明接收的属性，并且可以在模板中使用这些属性。

<template>
  <div>
    <h2>{{ name }}</h2>
    <p>{{ age }}</p>
  </div>
</template>

<script>
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  name: 'ChildComponent',
  props: {
    name: {
      type: String,
      required: true,
    },
    age: {
      type: Number as PropType<number>,
      required: true,
    },
  },
});
</script>

在子组件的 `props` 中，我们声明了 `name` 和 `age` 两个属性，分别指定了它们的类型和是否必需。

这是一个简单的示例，演示了 Vue 3 中如何使用 `props` 进行组件间的数据传递。希望对您有所帮助！如果您有任何进一步的问题，请随时提问。