文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue中v-model指令与.sync修饰符的区别详解

2024-04-02 19:55

关注

v-model


    <!--父组件-->
    <template>
        <!--v-model 指令是语法糖-->
        <Child v-model="model"></Child>
        <!-- 把 v-model 指令展开后相当于下面的代码 -->
        <!-- v-model绑定的默认事件是input,默认prop是value属性 -->
        <Child :value="model" @input="model = $event"></Child>
    </template>

你也可以通过子组件中的model选项来修改v-model绑定的的默认事件和prop自定义属性:


 //子组件
 export default {
  model: {
         prop: 'checked',
         event: 'change'
     }
 }

所以相应的父组件使用v-model的时候的等效操作为:


    <template>
        <Child :checked="model"  @change="model = $event"></Child>
    <template>

v-model通常用于表单控件,因为这样子组件有更强的控制能力

.sync


   <!-- 父组件 -->
    <template>
        <!-- .sync添加于v2.4,他能用于修改传递到子组件中的属性 -->
        <Child :xxx.sync="model"></Child>
        <!-- 等效于下面的代码 -->
        <Child :xxx = "model" @update:xxx = "model = $event"></Child>
    </template>
    <!-- 子组件 -->
    <input :value="xxx" @input = "$emit('update:xxx', $event.target.value)"/>

这里绑定的属性名称xxx可以更改,相应的属性名也会变化:


    <!-- 父组件 -->
    <template>
        <Child :foo.sync="model"></Child>
    </template>
    <!-- 子组件 -->
    <input :value = "foo" @input = "$emit('update:foo', $event.target.value)"/>

.sync的原理用到了子组件向父组件派发事件的$emit方法。其应用场景为子组件想修改父组件传递的属性;

.sync修饰符的控制能力都在父组件,事件名称也是相对固定的update:xxx

两者本质都是一样,并没有任何区别: “监听一个触发事件”="(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都是)、等等...
2..sync针对更多的是各种各样的状态,是状态的互相传递,是status,是一种update操作。
比如:组件loading状态、子菜单和树结构展开列表(状态的一种)、某个表单组件内部验证状态、等等....

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯