vue2中自定义组件的v-model和v-model.sync的写法,以及vue3中自定义组件v-model的写法

v-model可以在自定义组件上用于双向数据绑定,

举例说明,父组件传递给子组件一个值,在子组件中,当这个值修改之后,父组件也会修改,

此时可以通过简单的通信方式做到,可以在父组件中,使用v-bind或者:把这个值给子组件,子组件中,使用props接收,在子组件中修改这个值时,使用this.$emit把这个值发送出去,在父组件上接收,当子组件修改的时候父组件也会变化,这样也可以实现双向绑定。但是这种方式很麻烦,vue有v-model这种简单的实现凡事·方式。

vue2自定义组件v-model

vue2可以在子组件上使用v-model,实现双向绑定

父组件的写法



子组件的写法



vue2中自定义组件的v-model和v-model.sync的写法,以及vue3中自定义组件v-model的写法_第1张图片

 这种写法,在父组件内部写很少的代码,子组件内部代码也很少,缺点只能传递一个

vue2自定义组件.sync

父组件



子组件



vue2中自定义组件的v-model和v-model.sync的写法,以及vue3中自定义组件v-model的写法_第2张图片

这种方式可以传递多个参数 

甚至可以拓展一下,当子组件把数据改了之后父组件需要做出反应,可以在子组件上写方法

比如这里的updataFatherAge,或者使用监听


vue3的自定义组件v-model

vue3是将.sync的功能放到了v-model,用法和vue2的.sync类似

父组件



子组件



如果不需要在数据变化时父组件做反应,unpdateFatherTitle 可以不写

vue2中自定义组件的v-model和v-model.sync的写法,以及vue3中自定义组件v-model的写法_第3张图片

 更多链接,可以去看看这个

vue3的v-model

vue2中v-model和.sync的区别 - 掘金

你可能感兴趣的:(javascript,vue.js,前端,vue)