vue 使用props进行父子组件传值

### Vue 3 中父子组件通过 `props` 进行传值 在 Vue 3 中，父组件可以向子组件传递数据的方式是利用 `props` 属性。这使得数据可以从父级单向流动到子级。 #### 父组件定义与调用 父组件负责准备要发送给子组件的信息，并且在模板中使用特定语法来指定这些信息作为属性传递下去： ```html <!-- ParentComponent.vue --> <template> <div class="parent"> <!-- 将 title 和 description 数据项作为 prop 发送给 ChildComponent 组件 --> <ChildComponent :title="postTitle" :description="postDescription"/> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { postTitle: 'Vue 3 Props Example', postDescription: 'Learn how to use props in Vue 3.' }; } }; </script> ``` #### 子组件接收并显示 子组件则需声明它期望接收到哪些 `prop` 值以及它们的类型。一旦声明完毕，就可以像访问本地变量一样轻松地读取来自父组件的数据了。 ```html <!-- ChildComponent.vue --> <template> <article> <h1>{{ title }}</h1> <p>{{ description }}</p> </article> </template> <script> // 定义接受的 Prop 及其预期类型 export default { props: { title: String, description: String } } </script> ``` 这种模式不仅简化了组件间的通信逻辑，还增强了代码可维护性和复用性[^1]。 #### 使用 TypeScript 提升安全性 对于更复杂的项目来说，采用 TypeScript 来增强类型的严谨度是非常有益处的。可以在定义 `props` 的时候指明更加具体的类型约束，从而减少运行时错误的发生几率。 ```typescript // 如果使用 TypeScript，则可以在 .vue 文件中的 script 部分这样写： <script lang="ts"> import { defineComponent, PropType } from 'vue'; interface PostData { id?: number; content: string; } export default defineComponent({ props: { postData: Object as PropType<PostData>, required: true } }); </script> ``` 上述例子展示了如何安全有效地运用 `props` 实现父子组件间的数据共享[^4]。