在開(kāi)發(fā)Vue項(xiàng)目時(shí)，子組件是非常常見(jiàn)的組件類型。子組件顧名思義就是被包含在另一個(gè)組件中的子級(jí)組件。隨著項(xiàng)目的發(fā)展，我們有時(shí)候需要關(guān)閉一個(gè)子組件，本文將詳細(xì)講述如何關(guān)閉Vue子組件。

首先，我們需要明確一點(diǎn)，關(guān)閉Vue子組件不是指隱藏子組件，在Vue框架中隱藏子組件可以使用v-show或v-if指令來(lái)實(shí)現(xiàn)。關(guān)閉子組件是指使子組件不再顯示在父組件的組件樹(shù)中，也就是將其徹底卸載。

<template>
<div>
<h1>我的父組件</h1>
<my-child :is-show="true"/>
<button @click="closeChild">關(guān)閉子組件</button>
</div>
</template>
<script>
import MyChild from './MyChild.vue';
export default {
name: 'MyParent',
components: {
MyChild
},
methods: {
closeChild() {
// TODO: 調(diào)用關(guān)閉子組件的方法
}
}
};
</script>

如上代碼所表示，拉取了子組件MyChild.vue。父組件中使用了Is-Show這個(gè)屬性來(lái)控制是否顯示MyChild.vue。同時(shí)父組件中也掛載了一個(gè)關(guān)閉子組件的方法。

那么如何調(diào)用關(guān)閉Vue子組件的方法呢？Vue提供了兩種方式來(lái)銷毀子組件，即將子組件從父組件中刪除和銷毀子組件的實(shí)例對(duì)象。這兩種方式分別對(duì)應(yīng)兩個(gè)函數(shù)，removeChild()和destroy()。我們實(shí)現(xiàn)關(guān)閉Vue子組件需要用到Vue的一個(gè)mixins方法。

<script>
export default {
mounted() {
this.$root.eventHub.$on('close-child-component', this.closeSelf);
},
beforeDestroy() {
this.$root.eventHub.$off('close-child-component', this.closeSelf);
},
methods: {
closeSelf() {
const elem = this.$el;
elem.parentNode.removeChild(elem);
this.$destroy();
}
}
};
</script>

如上代碼所示，我們定義了一個(gè)名為closeSelf的方法。在父組件mounted鉤子函數(shù)中，我們監(jiān)聽(tīng)了一個(gè)事件名為“close-child-component”，然后將closeSelf綁定到該事件上。當(dāng)我們需要關(guān)閉子組件時(shí)，只需要觸發(fā)該事件即可。

當(dāng)我們調(diào)用事件時(shí)，會(huì)將$el即子組件的DOM元素從父節(jié)點(diǎn)中刪除，并通過(guò)this.$destroy()方法銷毀子組件的實(shí)例對(duì)象，這意味著子組件的所有生命周期鉤子函數(shù)都會(huì)被調(diào)用（beforeDestroy、destroyed）。

在使用Vue框架中，子組件是非常常見(jiàn)的組件類型。而在Vue中關(guān)閉子組件就需要將子組件從父組件中刪除并銷毀子組件的實(shí)例對(duì)象。我們可以使用Vue提供的mixins方法，來(lái)實(shí)現(xiàn)關(guān)閉Vue子組件。