美文网首页
vue双向绑定的三种方法.

vue双向绑定的三种方法.

作者: 草小孟 | 来源:发表于2023-06-26 19:08 被阅读0次

在 Vue.js 中,使用 .sync 修饰符时,能够实现父组件和子组件之间的双向绑定。这种双向绑定的实现是基于一个约定:使用 .sync 修饰符绑定的属性需要满足以下条件:

属性名称需要带有 v-bind 的动态属性绑定语法。
在子组件内部,通过 $emit 触发一个事件来更新该属性的值。
这样,父组件中绑定的属性会实时响应子组件的变化,而子组件通过触发事件将变化传递给父组件。

在你提供的代码中,使用对象 paraObject 可以实现双向绑定,而使用普通的变量 isShow 则不能实现双向绑定。这是因为对象是引用类型,对象的属性可以通过引用来共享,从而实现双向绑定。

在对象的情况下,当你在父组件中更新 paraObject.isShow 的值时,子组件中绑定的 :is-show.sync 属性会实时更新,并且子组件通过 $emit 触发的事件也会同步更新父组件中的 paraObject.isShow 值。

而在普通变量的情况下,变量是按值传递的,无法直接共享内存地址,所以无法实现双向绑定。如果你希望在子组件中更新变量的值并反映到父组件中,你需要通过事件的方式显式地将变量的新值传递给父组件。

综上所述,使用对象作为属性可以实现双向绑定,而普通变量则需要通过事件的方式来进行值传递。


image.png
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);
            }
        }

相关文章

网友评论

      本文标题:vue双向绑定的三种方法.

      本文链接:https://www.haomeiwen.com/subject/mklgydtx.html