Vue v-model 指令详解以及sync修饰符的使用场景(结合父子组件通信案例)

参考Vue官方文档
Vue v-model 指令详解以及sync修饰符的使用场景(结合父子组件通信案例)_第1张图片

一、需求如下:

Vue v-model 指令详解以及sync修饰符的使用场景(结合父子组件通信案例)_第2张图片

二、代码如下

Vue v-model 指令详解以及sync修饰符的使用场景(结合父子组件通信案例)_第3张图片
Vue v-model 指令详解以及sync修饰符的使用场景(结合父子组件通信案例)_第4张图片

三、分步解析:

  1. 父组件给子组件传值:
    Vue v-model 指令详解以及sync修饰符的使用场景(结合父子组件通信案例)_第5张图片
  2. 子组件给父组件传值:
    Vue v-model 指令详解以及sync修饰符的使用场景(结合父子组件通信案例)_第6张图片

四、sync修饰符的使用

vue.js官方文档
Vue v-model 指令详解以及sync修饰符的使用场景(结合父子组件通信案例)_第7张图片

如果已经使用了v-model双向绑定了一个数据,但是还想要实现另一个数据的双向绑定,那么可以采用.sync修饰符
Vue v-model 指令详解以及sync修饰符的使用场景(结合父子组件通信案例)_第8张图片
Vue v-model 指令详解以及sync修饰符的使用场景(结合父子组件通信案例)_第9张图片

你可能感兴趣的:(Vue.js,vue,v-model,数据双向绑定,父子组件通信)