最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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í)感興趣的朋友跟隨小編一起看看吧

最近幾個(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)文章

最新評(píng)論

淳安县| 云和县| 蓝田县| 福清市| 扎兰屯市| 扎兰屯市| 渭南市| 牡丹江市| 肇庆市| 新乡市| 冀州市| 通海县| 聊城市| 宜宾县| 华亭县| 佛教| 建昌县| 平和县| 岳阳县| 江安县| 那曲县| 德令哈市| 太白县| 贵定县| 洛浦县| 神木县| 定南县| 盱眙县| 宁夏| 通道| 潮州市| 浠水县| 镇赉县| 乌兰县| 岱山县| 荃湾区| 浠水县| 武安市| 亳州市| 习水县| 深州市|