vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEM

2020-06-16 06:43:17易采站长站整理

// 利用sync进行数据双向绑定,子组件修改dialogVisible的值,并响应到父组件
hidePanel() {
this.$emit('update:dialogVisible', false)
}
},
}
</script>

这里用到了elementUI的before-close方法,是弹窗关闭前的回调,用在这里的意思是在element自带的关闭弹窗方法之前调用hidePanel方法,由我们来控制弹窗的关闭,这样就能在关闭时更新dialogVisible的值,解决报错。

原理

很多时候我们需要在子组件中修改prop的值,这样就破坏了vue的单项数据流,利用vue2.3的sync可以实现数据的双向绑定,这是官方解释 https://cn.vuejs.org/v2/guide… ,使用方式也很简单。

总结

以上所述是小编给大家介绍的vue子组件改变父组件传递的prop值通过sync实现数据双向绑定,希望对大家有所帮助!