以下是一个简单的示例，演示了如何在 Vue 3.0 中使用 props：
父组件
<template>
<div>
<child-component :message="parentMessage"></child-component>
</div>
</template>
<script>
const app = Vue.createApp({
data() {
return {
parentMessage: '这是父组件的消息'
};
}
});
app.component('child-component', {
props: ['message'], // 定义 props
template: '<p>{{ message }}</p>'
});
app.mount('#app');
</script>
在这个例子中，child-component 组件通过 props: ['message'] 声明接受名为 message 的 prop。然后在父组件中，使用 :message="parentMessage" 将父组件的 parentMessage 数据传递给子组件。
子组件
<template>
<p>{{ message }}</p>
</template>
<script>
export default {
props: ['message'], // 声明接受的 prop
};
</script>
在子组件中，通过 props: ['message'] 声明接受名为 message 的 prop。然后，可以在模板中使用 {{ message }} 来显示从父组件传递过来的数据。
使用 props 有几个要点需要注意：
1. 单向数据流： 数据是从父组件流向子组件的，子组件不能直接修改 props 中的数据。如果需要在子组件中修改数据，可以使用 emit 发送自定义事件，让父组件处理这些事件。
2. Prop 验证： 你可以通过 type、required、default 等选项对 props 进行验证和设置默认值。
props: {
message: {
type: String,
required: true,
default: '默认消息'
}
}
3. CamelCase vs. Kebab-case： 在模板中，props 以 camelCase 形式使用，但在父组件中传递时，应使用 kebab-case。例如，myProp 在模板中使用为 myProp，但在父组件中传递为 my-prop。
通过良好的使用 props，可以使组件之间的数据传递更加清晰和可维护。
转载请注明出处：http://www.zyzy.cn/article/detail/493/Vue 3.0