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

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

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

Vue2

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

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

父組件獲取子組件實(shí)例，調(diào)用子組件方法等；

控制臺(tái)輸出：

這個(gè)輸出的子組件實(shí)例里包含所有的變量和方法；

Vue3

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

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

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

父組件

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

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

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

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

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

React

react函數(shù)式組件已經(jīng)跟vue3差不多了，只不過(guò)是名字不一樣而已；
在react中，通過(guò)useImperativeHandle這個(gè)hook+高階組件formRef來(lái)暴露出組件的方法；
貼一下某個(gè)業(yè)務(wù)代碼片段
子組件暴露出去的方法

這其中BasicImpHandle 就是暴露的方法類型接口；

父組件

render

Vue3和React獲取的子組件實(shí)例不會(huì)像Vue2那樣暴露全部的方法和數(shù)據(jù)了,只會(huì)暴露定義好的數(shù)據(jù)出來(lái)，感覺更安全吧；
就醬.

到此這篇關(guān)于Vue/React子組件實(shí)例暴露方法(TypeScript)的文章就介紹到這了,更多相關(guān)react組件暴露內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue中子組件的顯示與隱藏方式
這篇文章主要介紹了Vue中子組件的顯示與隱藏方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue中使用echarts實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定以及獲取后端接口數(shù)據(jù)
總結(jié)一下自己最近項(xiàng)目中用echarts動(dòng)態(tài)獲取接口數(shù)據(jù)并畫圖的方法,下面這篇文章主要給大家介紹了關(guān)于vue中使用echarts實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定以及獲取后端接口數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下
2022-07-07
vue實(shí)現(xiàn)接口封裝的實(shí)現(xiàn)示例
本文主要介紹了vue實(shí)現(xiàn)接口封裝的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-11-11
vue搭建簡(jiǎn)易前端的思路及問題詳解
這篇文章主要介紹了如何使用Vue和ElementPlus構(gòu)建前端頁(yè)面,特別是如何進(jìn)行跨域請(qǐng)求和使用Vue?Router進(jìn)行路由管理,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-01-01
$Element中的Cascader（級(jí)聯(lián)列表）動(dòng)態(tài)加載省\市\(zhòng)區(qū)數(shù)據(jù)的方法$
Element中的Cascader（級(jí)聯(lián)列表）動(dòng)態(tài)加載省\市\(zhòng)區(qū)數(shù)據(jù)的方法
這篇文章主要介紹了Element中的Cascader（級(jí)聯(lián)列表）動(dòng)態(tài)加載省\市\(zhòng)區(qū)數(shù)據(jù)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-03-03
Vue利用openlayers實(shí)現(xiàn)點(diǎn)擊彈窗的方法詳解
點(diǎn)擊彈窗其實(shí)就是添加一個(gè)彈窗圖層，然后在點(diǎn)擊的時(shí)候讓他顯示出來(lái)罷了。本文將利用openlayers實(shí)現(xiàn)這一效果，快跟隨小編一起學(xué)習(xí)一下吧
2022-06-06
使用vuex較為優(yōu)雅的實(shí)現(xiàn)一個(gè)購(gòu)物車功能的示例代碼
這篇文章主要介紹了使用vuex較為優(yōu)雅的實(shí)現(xiàn)一個(gè)購(gòu)物車功能的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
Mock.js在Vue項(xiàng)目中的使用小結(jié)
這篇文章主要介紹了Mock.js在Vue項(xiàng)目中的使用,在vue.config.js中配置devServer，在before屬性中引入接口路由函數(shù)，詳細(xì)步驟跟隨小編通過(guò)本文學(xué)習(xí)吧
2022-07-07
Vue中插槽slot的使用方法與應(yīng)用場(chǎng)景詳析
這篇文章主要給大家介紹了關(guān)于Vue中插槽slot的使用方法與應(yīng)用場(chǎng)景的相關(guān)資料,插槽（Slot）是Vue提出來(lái)的一個(gè)概念，正如名字一樣，插槽用于決定將所攜帶的內(nèi)容，插入到指定的某個(gè)位置，從而使模板分塊，具有模塊化的特質(zhì)和更大的重用性,需要的朋友可以參考下
2021-06-06
Vue中 axios delete請(qǐng)求參數(shù)操作
這篇文章主要介紹了Vue中 axios delete請(qǐng)求參數(shù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08