Vue/React子組件實例暴露方法(TypeScript)

更新時間：2022年11月21日 10:59:58 作者：ZhuAiQuan

最近幾個月都在用TS開發(fā)各種項目，框架有涉及到Vue3,React18等，記錄一下Vue/React組件暴露出變量/函數(shù)的方法的寫法，對vue?react組件暴露方法相關知識感興趣的朋友跟隨小編一起看看吧

Vue2

回顧一下Vue2 組件暴露出去方法，它并沒有約束，寫在methods里的方法都能被調用，data里的變量也能被接收；

現(xiàn)拉一個vue 2.6.10的模板下來
子組件的數(shù)據(jù)

父組件獲取子組件實例，調用子組件方法等；

控制臺輸出：

這個輸出的子組件實例里包含所有的變量和方法；

Vue3

組件通過vue3提供的defineExpose方法，把需要暴露出去的函數(shù)/變量放入到該方法里；

<script setup lang="ts">
import { defineExpose, ref } from 'vue';
...
// 舉個例子
const name = ref('ikun');
function setName(name: string) {
	name.value = name;
}

defineExpose({
	name,
	setName
})
</script>

父組件

同樣在子組件上聲明一個ref對象接收這個子組件實例；為了能自動識別出暴露的方法，需要指定這個ref對象的類型；
此時可以在任意方法里訪問這個子組件暴露出來的數(shù)據(jù)

<script setup lang="ts">
import { ref } from 'vue';

interface ChildInstance {
	name: string
	setName: (name: string) => void
}

const child = ref<ChildInstance >();
// 調用此方法即可改變子組件里的數(shù)據(jù)
function test() {
	child.value?.setName('xxx')
	console.log(child.value?.name)
}
</script>

<template>
	...
	<Child ref="child" />
</template>