封装组件使用v-model 注意事项

vmodel双向绑定需要注意的是,我们在组件里的操作不能直接修改props,而官方给出的例子又非常简单。

简单例子不能解决复杂场景

例如下面简单的例子:






如果这个组件里,我需要封装一部分交互逻辑,并修改值value,我该怎么做呢?我是不能直接修改value的,vue官网的例子是把这些简化了的,我们需要还原正常的组件封装流程。

正常组件封装流程

1、外层传递vmodel绑定的值,需要内层data里定义一个对应的对象来接收,并做交互操作所绑定的值。
2、相当于currentValue是value的一面镜子,作为子组件和父组件通信的第三方协调者。
(1)协调父组件到子组件的数据过程。
(2)协调交互到界面的数据过程+交互到父组件的过程





你可能感兴趣的:(封装组件使用v-model 注意事项)