Vue/React子組件實(shí)例暴露方法(TypeScript)
最近幾個(gè)月都在用TS開發(fā)各種項(xiàng)目,框架有涉及到Vue3,React18等;
記錄一下Vue/React組件暴露出變量/函數(shù)的方法的寫法;
Vue2
回顧一下Vue2 組件暴露出去方法,它并沒有約束,寫在methods里的方法都能被調(diào)用,data里的變量也能被接收;
現(xiàn)拉一個(gè)vue 2.6.10的模板下來
子組件的數(shù)據(jù)
父組件獲取子組件實(shí)例,調(diào)用子組件方法等;
控制臺(tái)輸出:
這個(gè)輸出的子組件實(shí)例里包含所有的變量和方法;
Vue3
組件通過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è)子組件暴露出來的數(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差不多了,只不過是名字不一樣而已;
在react中,通過useImperativeHandle這個(gè)hook+高階組件formRef來暴露出組件的方法;
貼一下某個(gè)業(yè)務(wù)代碼片段
子組件暴露出去的方法
這其中BasicImpHandle 就是暴露的方法類型接口;
父組件
render
Vue3和React獲取的子組件實(shí)例不會(huì)像Vue2那樣暴露全部的方法和數(shù)據(jù)了,只會(huì)暴露定義好的數(shù)據(jù)出來,感覺更安全吧;
就醬.
到此這篇關(guān)于Vue/React子組件實(shí)例暴露方法(TypeScript)的文章就介紹到這了,更多相關(guān)react組件暴露內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue實(shí)現(xiàn)動(dòng)態(tài)列表點(diǎn)擊各行換色的方法
今天小編就為大家分享一篇vue實(shí)現(xiàn)動(dòng)態(tài)列表點(diǎn)擊各行換色的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue 查看dist文件里的結(jié)構(gòu)(多種方式)
本文通過三種方式給大家介紹了vue 查看dist文件里的結(jié)構(gòu),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01vue-resource 攔截器(interceptor)的使用詳解
本篇文章主要介紹了vue-resource 攔截器(interceptor)的使用詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細(xì)教程
這篇文章主要介紹了vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細(xì)教程,其中聲明式router-link實(shí)現(xiàn)跳轉(zhuǎn)最簡(jiǎn)單的方法,可用組件router-link來替代a標(biāo)簽,每種方式給大家講解的非常詳細(xì)需要的朋友可以參考下2022-11-11Vue指令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-02vue?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-07Vertx基于EventBus發(fā)送接受自定義對(duì)象
這篇文章主要介紹了Vertx基于EventBus發(fā)送接受自定義對(duì)象,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11