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;

2. 將組件放在a-tabs外，另寫即可