创作背景
因为本前端菜鸟写代码从没考虑过代码是否易于维护,所以一旦涉及组件通信,一律使用Pinia状态管理,至于父子组件通信啥的,学完Pinia之后就被我狠狠抛弃了,当时就在想:为什么不直接教Pinia,这玩意儿不是远比父子组件通信好用吗?
但是这几天研读黑马程序员大事件的代码居然发现了父子组件通信,为了完全读懂代码,打算前来复习,重拾被我扔掉的知识
代码研读
如下图所示,父组件需要向子组件传递标题信息,如“基本资料”
子组件关键代码
父组件关键代码
引入子组件
使用子组件并传值
复习一下
Vue2选项式API中的父传子
看到这里我就疑惑了,为什么项目代码里接收父组件数据用的是defineProps,而PPT中只出现过props,于是我去问了AI,AI说:
这段代码使用的是 Vue 3 中的 Composition API 中的 defineProps 函数。在 Vue 3 中,使用 Composition API 时,可以使用 defineProps 来定义组件的 props。它类似于 Vue 2.x 中的 props 选项,但是在 Composition API 中使用更加灵活和直观。
通过 defineProps 定义的 props 具有类型检查、默认值等特性,并且可以更好地与其他 Composition API 功能集成,使得代码更易于理解和维护。在你提供的示例中,defineProps 用于定义一个名为 title 的 prop,其中 required 属性指定为 true,类型为 String。
这种方式可以让你在使用 Composition API 时更灵活地处理组件的 props,并且能够更好地利用 JavaScript 的特性来定义和验证 props。
好的,于是我又翻出Vue3组合式API的PPT
Vue3组合式API中的父传子
一些经验
由此,我也总结出了一些经验
其实父子组件通信还是有应用场景的,平时我们写进pinia数据仓库里的数据基本上是比较重要,且需要多个组件共同维护或者共享的数据,比如用户信息数据等,但是像今天代码中的例子,只涉及两个组件,且通信的数据也不是很重要,这个时候就完全没必要用pinia状态管理了