一般传值问题各种api基本都被讲透了,没什么好说的了,但在实际写代码时,有个问题挺麻烦的,那就是:值的传递及修改
使用defineEmites
由于vue限制子组件对父组件传来的值只可读,不可改.在值由子组件定义的前提下,这时只能先定义一个事件,再发送值给父组件
这样做有个问题,一是麻烦,二是一旦需要传两层以上的组件的话就令人崩溃.
使用v-model语法糖
在值由父组件定义的前提下,使用v-model的话,只能是父子组件,如果再多一层的话就报告说子组件不能修改父组件的值了.
那话说v-model的语法糖是怎么起作用的?为什么这种情况下子组件看起来好像可以修改父组件的值?
使用pinia
其实这里不使用也行,直接创建一个js文件,里面用响应式api定义数据,直接export数据,但这样的话就失去vue开发者工具调试支持
直接用compositon API 来创建 pinia 数据容器,详情见官网(pinia.web3doc.top/cookbook/co…),
每一个组件对应一个数据容器,需要用的时候直接import useXX, 然后useXX拿到数据,
折腾了好几种方法,发现原来这是最实在的方法,而且这样的话UI逻辑和业务逻辑也能变得更加明确
ps: 这里建议用compositon API 来创建,因为pinia原生的数据的响应性是通过reactive api来实现的,所以一旦解构赋值就失去响应性了,要想使用解构赋值且保留响应性的话,需要使用ref api来定义响应性数据.
