脚本宝典收集整理的这篇文章主要介绍了Vue props 双向数据绑定方法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
众所周知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>```
大致就是这样可以实现父子和子父组件之间的传值以上是脚本宝典为你收集整理的Vue props 双向数据绑定方法全部内容，希望文章能够帮你解决Vue props 双向数据绑定方法所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。