Vue,实现组件属性的双向绑定方式

prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来

A 中 调用 B 这个组件 A表示的就是父组件 B表示的就是子组件 如果父组件的值发生了变化,将会传导给子组件,但是子组件中发生了变化,由于原来子组件的数据已经展示出来,再次修改则无法直接显示数据修改

解决的办法如下

在子组件的内部
Vue.component("switchbtn", {
    template: "
{{myResult?'开':'关'}}
"
, props: ["result"], // 存贮父组件传过来的值 data: function () { return { myResult: this.result // 在data中我们重新声明一个值来存放 父组件传递过来的值 }; }, // 给父组件传过来的值 props: ["result"], result 进行监听 watch: { result(val) { this.myResult = val;//新增result的watch,监听变更并同步到myResult上 } },

参考链接:https://www.cnblogs.com/xxcanghai/p/6124699.html?_t=t

你可能感兴趣的:(vue,vue,组件之间的传值)