vue 笔记 -- vue .sync 修饰符 & 组件使用 .sync 和 v-model的区别
.sync 相当于 v-bind: xxx='***' v-on:update:xxx='*** = $event'
注意：v-bind.sync= 一个对象或者数组
eg1.
// html:
//js:
var comp = {
template: `
{{foo}} , {{bar}}
`,
props: ['foo', 'bar'],
methods: {
changeFooBar() {
this.$emit('update:foo', this.foo + '!');
this.$emit('update:bar', this.bar + '!');
}
}
};
var vm = new Vue({
el: '#app',
components: {
comp
},
data() {
return {
doc: {
foo: 'foo',
bar: 'bar'
}
}
}
});
eg2.
//html
//.sync可以单独绑定某个属性，即上面的可以直接写成下面这样
//js
var comp = {
template: `
{{foo}} , {{bar}} , {{baz}}
`,
props: ['foo', 'bar', 'baz'],
methods: {
changeFooBar() {
this.$emit('update:foo', this.foo + '!');
this.$emit('update:bar', this.bar + '!');
this.$emit('update:baz', this.baz + '?');
}
}
};
var vm = new Vue({
el: '#app',
components: {
comp
},
methods: {
},
data() {
return {
baz: 'baz',
doc: {
foo: 'foo',
bar: 'bar'
}
}
}
})
组件中使用 .sync 和 v-model 的区别：
来自：https://juejin.im/post/5eddbaee5188254344768fdc#heading-11
