vue中的 .sync 和 v-model 的区别对比

自定义组件的 v-model.sync 修饰符其实本质上都是vue的语法糖,用于实现父子组件的“数据”双向绑定

Vue中的 props 是单向向下绑定的,即:每次父组件更新时,子组件中的所有 props 都会刷新为最新的值。但是如果在子组件中修改 props ,Vue会向你发出一个警告、报错,这就形成了一个单向数据流。因此我们可以在父组件使用子组件的标签上声明一个监听事件,在子组件想要修改时使用 $emit 触发事件并传入新的值,让父组件进行修改。

.sync修饰符

.sync 修饰符添加于 v 2.4,其实就是父组件监听子组件更新某个props的请求的缩写语法。

例如:

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

这段代码用 .sync 修饰符写的话:

<text-document v-bind:title.sync="doc.title"></text-document>

子组件中,可以通过下面代码来实现对这个prop重新赋值的意图:

this.$emit('update:title', newTitle)

当我们想一个对象同时设置多个 prop 的时候,也可以将这个 .sync 修饰符和 v-bind 配合使用:

<text-document v-bind.sync="doc"></text-document>

这样会把doc对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去,然后各自添加用于更新的 v-on 监听器。

v-model本质

v-model是用来在表单控件或者组件上创建双向绑定的,他的本质是v-bindv-on的语法糖,在一个组件上使用v-model,默认会为组件绑定名为valueprop和名为input的事件。

<input type="text" :value="name" @input="name=$event.target.value">
<!--等同于<input type="text" v-model="name">-->

父组件:

<template>
  <div class="">
    <p>{{ name }}</p>
    <son v-model="name"></son>
    <!--等同于 <son type="text" :value="name" @input="name=$event"/> -->
  </div>
</template>
 
<script type="text/javascript">
import Son from "./components/son";
export default {
  name: "",
  data() {
    return {
      name: "sheben",
    };
  },
  components: {
    Son,
  },
};
</script>

子组件:

<template>
  <div class>
    <input
      type="text"
      :value="value"
      @input="$emit('input', $event.target.value)"
    />
  </div>
</template>
 
<script type="text/javascript">
export default {
  name: "",
  props: {
    value: {
      type: String,
      defalut() {
        return "";
      },
    },
  },
  data() {
    return {};
  },
  components: {},
};
</script>

.sync从功能上看和v-model十分相似,都是为了实现数据的“双向绑定”,本质上,也都不是真正的双向绑定,而是语法糖。

相比较至下,.sync会更加灵活,它可以给多个prop使用。

从语义上来看,v-model绑定的值是指这个组件的绑定值,比如input组件,select组件,日期时间选择组件,颜色选择器组件,这些组件所绑定的值使用v-model比较合适。其他情况,没有这种语义,个人认为使用.sync更好。

两者都需要手动触发$emit方法。

原文:点击这里

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » vue中的 .sync 和 v-model 的区别对比

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们