ant-design-vue——子组件通过$parent修改父组件的值时无效问题及解决方法

参考：https://www.cnblogs.com/stella1024/p/10405730.html 

 

我的情况： 父组件index，子组件unitTree，unitTree内勾选数据后，修改index内的值并显示。但是一直没有效果。

 

unitTree代码:

this.$parent.checkedId = this.checkedId;

 

原因： 父组件index内引入组件unitTree时，是放在a-tabs>a-tab-pane下的，a-tab，a-tab-pane本身就属于一个子组件，子组件嵌套子组件，嵌套了多层的关系

index代码：

 <a-tabs>
    <a-tab-pane tab="选择单位" key="1">
        <unitTree />
    </a-tab-pane>
</a-tabs>

 

解决方法：

1.父组件中注册provide和子组件中注册inject，允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

index中：

export default {
        name: "index",
        provide() {
            return {
                homepage: this, // 允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
            };
        },
        ...
}

unitTree中：

 export default {
        name: 'unitTree',
        inject: ["homepage"],
        ...
}

this.homepge.checkedId = this.checkedId;

 

2.累计$parent

this.$parent.$parent.$parent.$parent.$parent.checkedId = this.checkedId;

3. 将组件放在a-tabs外，另写即可