众所周知vue2中,把prop数据绑定的.sync去掉了,官方给出的原因是它会破坏「单向数据流」的假设,后来可能因为.sync在实际工作确实有用也很方便,vue2.3+ 又加上去了,不过实现机制稍有变化,详情请移步vue
在这里说下在去掉.sync的版本中如何给props数据绑定
在这里先说下我遇到的情景,父组件中有个按钮 parent.vue,子组件中是个弹窗 child.vue。
父组件中弹窗值默认为false,当点击父组件中的按钮时 按钮值为true且传给子组件的弹窗值为true,此时弹出子组件中的弹窗,当关闭弹窗时 弹窗值为false,且false传回给父组件。这也是常说的父子组件之间的通信,方法有很多,我这里说一种,使用Vue版本为2.1.8。
请看代码:
parent.vue
<template>
<div>
<button @click="showDialog"></button>
<show-dialog
:isDialogVisible= "isDialogVisible" //动态绑定父组件的数据到子模板的props,当父组件的数据发生变化,改变化也会传给子组件
@getDialogVisible="setDialogVisible" //监听子组件中$emit的变化
>
</show-dialog>
</div>
</template>
<script>
export default{
data() {
return {
isDialogVisible: false //初始化值
}
},
methods:{
showDialog(){
this.isDialogVisible = true; //点击button时,设值为true,触发动态绑定的:isDialogVisible
},
setDialogVisible(val){
this.isDialogVisible = val;
}
}
}
</script>
child.vue
<template>
<div>
<!--此处使用饿了么UI组件 版本1.2.9-->
<el-dialog
v-model="isDialogVisible"
>
</el-dialog>
</div>
</template>
<script>
export default{
data() {
return {
isDialogVisible: this.isDialogVisible //把props的值赋给isDialogVisible
}
},
props:[
'isDialogVisible' //接收父组件传的值,来控制弹窗显示和隐藏
],
watch:{
//监听isDialogVisible变更后对外发送事件通知,比如关闭弹窗时值变为false,通过$emit通知父组件的getDialogVisible,根据setDialogVisible方法去设置父组件的值
isDialogVisible(val){
this.$emit('getDialogVisible', val)
}
}
}
</script>```
大致就是这样可以实现父子和子父组件之间的传值