如何解决多个级别的Vue Prop SyncTypeScript,JavaScript和ClassStyle
我刚刚开始使用Vue和ts / js进行编程,所以如果我错过了明显的事情,请原谅我:)
我正在尝试将道具传递两个等级。如果等级3修改了道具,它也会在等级2上改变,但不会在等级1上改变。
第1级是我编写的一个组件,用ts编写。
<template>
<Child :varr.sync="obj.attr" />
</template>
export default Parent class extends Vue {
obj: Object = {
attr: [1,2,3]
};
}
第2级是我编写的一个组件,用ts编写。
<template>
<ChildsChild :layout.sync="arr" />
</template>
export default Child class extends Vue {
@PropSync("varr",{ type: Array }) arr!: number[];
}
第3级是我不写的组件,它是用js编写的。
export default {
props: {
layout: {
type: Array,required: true,}
}
}
解决方法
当你把东西传给孩子时,你需要小心不要直接在孩子上更新道具,因为这实际上是每次父母更新时重新渲染的。
就您而言,我不确定 PropSync 为何不起作用。我之前看到的类似模式是分离道具并添加一个观察者,如下所示
即 父
<template>
<Child :varr.sync="obj.attr" />
</template>
export default Parent class extends Vue {
obj: Object = {
attr: [1,2,3]
};
}
孩子:
<template>
<ChildsChild :layout.sync="passed_varr" />
</template>
export default Child class extends Vue {
props {
varr: {
type: Object
}
}
data: instance => ({
passed_varr: instance.varr,}
watch: {
passed_varr: {
handler() {
this.$emit('update:varr',this.passed_varr);
},deep: true,},}
在这种情况下,prop varr 与父组件同步,因此当布局在孙子组件中更新时,它会与 child.passed_varr
同步,后者有一个观察者向 parent.varr
发出更新
查看文档 here 似乎 PropSync
正在做类似的事情,因此不确定具体差异
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。