vue中v-model和.sync修饰符区别

v-model的本质

    <!--v-model写法-->
    <my-component type="text" v-model="value">
    <!--展开语法糖后的写法-->
    <my-component type="text"
      :value="value"
      @input="value = $event.target.value"
    >
    <!--
    默认针对原生组件input事件,但是如果子组件定义了针对事件
    model: {
            prop: "value",
            event: "update"
    },
    则编译为
    -->
    <my-component type="text"
      :value="value"
      @update="(val) => value = val"
    >
 

.sync本质

    <!--语法糖.sync-->
    <my-component :value.sync="value" />
    <!--编译后的写法-->
    <my-component 
      :value="msg" 
      @update:value="(val) => value = val"
    >
 

两者本质都是一样,并没有任何区别: “监听一个触发事件”="(val) => value = val"

细微之处的区别

1.只不过v-model默认对应的是input或者textarea等组件的input事件,如果在子组件替换这个input事件,其本质和.sync修饰符一模一样。比较单一,不能有多个。

// 子组件可以用自定义事件,来替换v-model默认对应的原生input事件,只不过我们需要在子组件手动 $emit
model: {
        prop: "value",
        event: "update"
},
 

一个组件可以多个属性用.sync修饰符,可以同时”双向绑定多个“prop”,而并不像v-model那样,一个组件只能有一个。

总结功能作用场景:

  1. v-model针对更多的是最终操作结果,是双向绑定的结果,是value,是一种change操作。

比如:输入框的值、多选框的value值列表、树结构最终绑定的id值列表(ant design和element都是)、等等…

  1. .sync针对更多的是各种各样的状态,是状态的互相传递,是status,是一种update操作。

比如:组件loading状态、子菜单和树结构展开列表(状态的一种)、某个表单组件内部验证状态、等等….
image.png

但是也有例外,就是v-model也可以替代部分.sync的情况,这是针对于这个组件只有一个功能就是切换状态的时候,这个状态就是最终操作值,这时候可以替代.sync修饰符。使用两种不同的方式双向绑定,能够让我们快速理解组件的结构。

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/12591.html

发表评论

登录后才能评论