在Vue中傳遞當前組件是一個常見的需求，有多種實現方式。本文將介紹其中兩種方式：父組件向子組件傳遞當前組件和通過$refs獲取當前組件。

父組件向子組件傳遞當前組件

通過props可以向子組件傳遞數據，我們可以通過在父組件中定義一個current屬性，并將當前組件傳遞給子組件：

// 父組件
<template>
<ChildComponent :current="this" />
</template>
<script>
import ChildComponent from './ChildComponent';
export default {
components: {
ChildComponent,
},
data() {
return {
data: 'hello',
};
},
};
</script>
// 子組件
<template>
{{ current.data }}
</template>
<script>
export default {
props: {
current: {
type: Object,
default: {},
},
},
};
</script>

此時在子組件中就可以通過current屬性獲取到父組件中傳遞的當前組件，并使用其中的數據。

通過$refs獲取當前組件

Vue通過$refs提供了一種簡便的方式獲取組件實例。我們可以在父組件中通過ref屬性定義組件名稱，然后通過$refs屬性獲取組件實例：

// 父組件
<template>
<ChildComponent ref="child" />
</template>
<script>
import ChildComponent from './ChildComponent';
export default {
components: {
ChildComponent,
},
mounted() {
console.log(this.$refs.child.data);
},
};
</script>
// 子組件
<template>
<div>{{ data }}</div>
</template>
<script>
export default {
data() {
return {
data: 'hello',
};
},
};
</script>

在父組件中通過$refs獲取子組件實例之后，就可以通過子組件的實例訪問子組件中的數據、方法等。在mounted生命周期函數中獲取子組件實例是非常合適的，因為此時子組件已經掛載完成。