Vue/React子組件實(shí)例暴露方法(TypeScript)
最近幾個(gè)月都在用TS開發(fā)各種項(xiàng)目，框架有涉及到Vue3,React18等；
記錄一下Vue/React組件暴露出變量/函數(shù)的方法的寫法；
Vue2
回顧一下Vue2 組件暴露出去方法，它并沒(méi)有約束，寫在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í)可以在任意方法里訪問(wèn)這個(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)，感覺(jué)更安全吧；
就醬.
到此這篇關(guān)于Vue/React子組件實(shí)例暴露方法(TypeScript)的文章就介紹到這了,更多相關(guān)react組件暴露內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇是我對(duì)vue使用過(guò)程中以及對(duì)一些社區(qū)朋友提問(wèn)我的問(wèn)題中做的一些總結(jié)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-02-02
vue實(shí)現(xiàn)動(dòng)態(tài)列表點(diǎn)擊各行換色的方法
今天小編就為大家分享一篇vue實(shí)現(xiàn)動(dòng)態(tài)列表點(diǎn)擊各行換色的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue 查看dist文件里的結(jié)構(gòu)(多種方式)
本文通過(guò)三種方式給大家介紹了vue 查看dist文件里的結(jié)構(gòu),非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
這篇文章主要介紹了如何在Vue.JS中使用圖標(biāo)組件，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-08-08
vue-resource 攔截器（interceptor）的使用詳解
本篇文章主要介紹了vue-resource 攔截器（interceptor）的使用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細(xì)教程
這篇文章主要介紹了vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細(xì)教程，其中聲明式router-link實(shí)現(xiàn)跳轉(zhuǎn)最簡(jiǎn)單的方法，可用組件router-link來(lái)替代a標(biāo)簽，每種方式給大家講解的非常詳細(xì)需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)穿梭框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
Vue指令v-for遍歷輸出JavaScript數(shù)組及json對(duì)象的常見方式小結(jié)
這篇文章主要介紹了Vue指令v-for遍歷輸出JavaScript數(shù)組及json對(duì)象的常見方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js使用v-for指令遍歷輸出js數(shù)組與json對(duì)象的常見操作技巧,需要的朋友可以參考下2019-02-02
vue?element-plus圖片預(yù)覽實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue?element-plus圖片預(yù)覽實(shí)現(xiàn)的相關(guān)資料,最近的項(xiàng)目中有圖片預(yù)覽的場(chǎng)景,也是踩了一些坑,在這里總結(jié)一下,需要的朋友可以參考下2023-07-07
Vertx基于EventBus發(fā)送接受自定義對(duì)象
這篇文章主要介紹了Vertx基于EventBus發(fā)送接受自定義對(duì)象,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11