VueJS中 v-bind 的一些修饰符

今天洗澡的时候在听 饥人谷的模拟面试 (五) 的时候,一直觉得这次面试的学生有点差,如果是我来面话可能已经让他回家了,但是 方方老师 很有耐心,在中间问道 .sync 的时候我 ???? 完全没有印象了。

正好自暴自弃了2个月没有更新了,所以复习一下 v-bind 的三个修饰符 [ .prop, .camel, .sync ]

首先就是 .sync

.sync (2.3.0+) 语法糖,会扩展成一个更新父组件绑定值的 v-on 侦听器。

直接看文档里边的这段话,可能会有点懵,但是可以大概猜到是更新单向流数据相关的。

然后看文档里边的 Demo 👇

1
2
<!-- 向子组件传入 title, 并且接收update事件更新title -->
<text-document v-bind:title="doc.title" v-on:update="doc.title = $event" />

然后通过子组件的 this.$emit('update:title', newTitle) 触发 update:title 事件,

不过正常时候的业务代码我不会这样写,会习惯使用以下的代码(不过没差啦,意思都一样)

1
<text-document :title="doc.title" @update="title => doc.title = title" />

然后通过子组件的 this.$emit('update', newTitle) 触发更新

虽然精简了一点,但是还是很冗余,所以轮到 .sync 这个语法糖出场,可以更加精简父组件的代码:

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

可以看到就是省略了接受子组件的 update 事件,像 v-model 这个语法糖一样双向绑定了数据。

需要注意一点的是,使用 .sync 这个语法糖,需要子组件内的 $emit 触发的事件以 update:myPropName 的形式来命名

所以我自己的遍码习惯就触发不了,需要修改子组件的 $emit 和文档中的一样使用 this.$emit('update:title', newTitle) 来触发更新


也可以将这个 .sync 修饰符和 v-bind 配合使用,用于修改传入的同一个对象中的多个属性

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

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

二: .prop

.prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定 (差别在哪里?)。

这个的主要就是你需要先理解 DOM propertyattribute 的 区别( DOM属性属性 挖个坑找时间聊聊),然后就很容易知道这个修饰符的作用了。

大概就是 v-bind 默认绑定到 DOM 节点的 attribute 上,使用 .prop 修饰符后,会绑定到 property

最后一个 .camel

.camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)

因为 HTML代码是不区分大小写的,但是有一些标签需要使用驼峰来申明属性,例如文档中的 svg 标签的 viewBox 属性,如果渲染成 viewbox 则会找不到值。

这个真的很少用到,文档还特别说明了 vue-loader 渲染的不会有这个问题:

在使用字符串模板或通过 vue-loader/vueify 编译时,无需使用 .camel


在Vue 3.0中的 .sync

今天写Vue遍码风格的时候发现了一个3.0的新规范,就是不推荐使用 v-bind-sync 这一个选项,里边提到了在 3.0 中已经解决了在组件上 v-model 只允许使用一个的问题,所以不推荐继续使用 .sync 了,大概看一下就好,链接添加在了附录内,所以这又是一篇迟到的文章,2333333。