在 Vue.js 中,使用 .sync 修饰符时,能够实现父组件和子组件之间的双向绑定。这种双向绑定的实现是基于一个约定:使用 .sync 修饰符绑定的属性需要满足以下条件:
属性名称需要带有 v-bind 的动态属性绑定语法。
在子组件内部,通过 $emit 触发一个事件来更新该属性的值。
这样,父组件中绑定的属性会实时响应子组件的变化,而子组件通过触发事件将变化传递给父组件。
在你提供的代码中,使用对象 paraObject 可以实现双向绑定,而使用普通的变量 isShow 则不能实现双向绑定。这是因为对象是引用类型,对象的属性可以通过引用来共享,从而实现双向绑定。
在对象的情况下,当你在父组件中更新 paraObject.isShow 的值时,子组件中绑定的 :is-show.sync 属性会实时更新,并且子组件通过 $emit 触发的事件也会同步更新父组件中的 paraObject.isShow 值。
而在普通变量的情况下,变量是按值传递的,无法直接共享内存地址,所以无法实现双向绑定。如果你希望在子组件中更新变量的值并反映到父组件中,你需要通过事件的方式显式地将变量的新值传递给父组件。
综上所述,使用对象作为属性可以实现双向绑定,而普通变量则需要通过事件的方式来进行值传递。

2.16.4 直接sync props是没问题的, 而在2.17.4 sync必须是date里的值, 否则会报错
使用常量, 子组件$emit事件, vue 2.7以上需要配合watch使用, 真是吐了
使用对象, 子组件不改变引用就不会发生问题, 真的好用, 文档真的不推荐. 如果严格控制, 暂时没发现什么问题
使用computed
showDialog:{
get() {
return this.visible;
},
set(value) {
// 在这里可以根据需要进行相应的逻辑处理
// 例如,可以触发一个自定义事件来通知父组件更新 prop 值
this.$emit('update:visible', value);
}
}
网友评论