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 进行组件间的数据传递。希望对您有所帮助！如果您有任何进一步的问题，请随时提问。