关于v-bind与v-model的父子传参问题

最近用Vue3写一个组件,Vue2都没用熟也硬上了。一个组件越写越大,梳理好逻辑后决定把显示和录入拆分开。

用第三方组件库太顺手,一开始用的是v-bind的写法。因为v-bind是单向数据流,需要在子组件里用 emit 触发父组件的方法,就和下面的例子一样。

例子中,无论是从父组件还是子组件修改,都能双向同步。实际项目的逻辑只会更复杂,像这样子把更新的逻辑放到父组件里会显得很割裂,父组件也不应该处理更新的逻辑,而应该把更新的逻辑放到子组件里。

一开始就是这样写,但越写越难受,然后就在想,有没有一种优雅一点的写法,就像是第三方组件库里实现的。回头找element-ui的源码,发现类似的组件用的是 v-model。恍然大悟!一直都是拿来主义,还真没留意到v-model。

缝缝补补写了个demo,把v-bind的写法改成v-model,子组件通过 emit 触发 update:count 就可以更新父组件的值了,就像下面的例子一样。

可以看到父组件干净又卫生,写v-model就是为了双向绑定。


关于v-bind与v-model的父子传参问题
http://lafish.fun/v-bind-and-v-model/
作者
lafish
发布于
2022年6月14日
许可协议