vue .sync修饰符的用法
背景:日常开发时,我们总会遇到需要父子组件双向绑定的问题,但是考虑到组件的可维护性,vue中是不允许子组件改变父组件传的props值的。那么同时,vue中也提供了一种解决方案.sync修饰符。在此之前,希望你已经知道了vue中是如何通过事件的方式实现子组件修改父组件的data的。如果你对此还不了解父子组件如何通过$emit实现双向通信,那就点我先了解下吧.sync修饰符:首先我们知道,...
背景:
日常开发时,我们总会遇到需要父子组件双向绑定的问题,但是考虑到组件的可维护性,vue中是不允许子组件改变父组件传的props值的。那么同时,vue中也提供了一种解决方案.sync修饰符。在此之前,希望你已经知道了vue中是如何通过事件的方式实现子组件修改父组件的data的。如果你对此还不了解父子组件如何通过$emit实现双向通信,那就点我先了解下吧
.sync修饰符:
首先我们知道,在子组件中可以通过$emit向父组件通信,通过这种间接的方式改变父组件的data,从而实现子组件改变props的值。比如向下边这这样:
子组件使用$emit向父组件发送事件:
this.$emit('update:title', newTitle)
父组件监听这个事件并更新一个本地的数据title:
<text-document
:title="title"
@update:title="val => title = val"
></text-document>
为了方便这种写法,vue提供了.sync修饰符,说白了就是一种简写的方式,我们可以将其当作是一种语法糖,比如v-on: click可以简写为@click。而上边父组件的这种写法,换成sync的方式就像下边这样:
<text-document
:title.sync="title"
></text-document>
有没有发现很清晰,而子组件中我们的写法不变,其实这两种写法是等价的,只是一个语法糖而已,如果到这里你还不太明白。下边是个完整的demo,可以copy自己的项目中尝试一下。相信你会恍然大悟。
子组件:
<template>
<div>
<input :value="name" @input="abc" type="text">
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
required: true
}
},
methods: {
abc(e) {
console.log(e.target.value);
this.$emit('update:name', e.target.value);
}
}
}
</script>
父组件:
<template>
<div>
<child :name.sync="name"></child>
<button @click="al">点击</button>
<button @click="change">改变</button>
</div>
</template>
<script>
import child from './child'
export default {
name: 'list',
components: {
child
},
data () {
return {
listItems: ['buy food', 'play games', 'sleep'],
name: 'xiaoming'
}
},
methods: {
al() {
alert(this.name);
},
change() {
this.name = '123';
}
}
}
</script>
ok,当你运行起来时,就会发现这样便实现了父子组件的双向绑定。
引用类型实现双向绑定:
如果你实在觉得$emit的实现方式麻烦,那也可以利用引用类型的特性,去实现双向绑定,具体实现就是,将props传入的值改为一个对象。这样你在子组件里边无论如何修改这个对象的属性,vue都检测不到。但是不要去修改这个props对象。具体原因大家可以看一下js引用类型。这里就不做demo展示了,毕竟是不推荐的做法。
总结:
sync修饰符,与我们平常使用$emit实现父子组件通信没有区别,只不过是写法上方便一些。当然,利用引用类型的特性实现双向绑定我认为也并非完全不可取。
更多推荐
所有评论(0)