欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

  • VUE 使用中踩過的坑

    VUE 使用中踩過的坑

    本篇是我對(duì)vue使用過程中以及對(duì)一些社區(qū)朋友提問我的問題中做的一些總結(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)擊各行換色的方法

    今天小編就為大家分享一篇vue實(shí)現(xiàn)動(dòng)態(tài)列表點(diǎn)擊各行換色的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue 查看dist文件里的結(jié)構(gòu)(多種方式)

    vue 查看dist文件里的結(jié)構(gòu)(多種方式)

    本文通過三種方式給大家介紹了vue 查看dist文件里的結(jié)構(gòu),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-01-01
  • 如何在Vue.JS中使用圖標(biāo)組件

    如何在Vue.JS中使用圖標(biāo)組件

    這篇文章主要介紹了如何在Vue.JS中使用圖標(biāo)組件,文中講解非常細(xì)致,代碼幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下
    2020-08-08
  • vue-resource 攔截器(interceptor)的使用詳解

    vue-resource 攔截器(interceptor)的使用詳解

    本篇文章主要介紹了vue-resource 攔截器(interceptor)的使用詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-07-07
  • vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細(xì)教程

    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來替代a標(biāo)簽,每種方式給大家講解的非常詳細(xì)需要的朋友可以參考下
    2022-11-11
  • Vue實(shí)現(xiàn)穿梭框效果

    Vue實(shí)現(xiàn)穿梭框效果

    這篇文章主要為大家詳細(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é)

    這篇文章主要介紹了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)方法

    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ì)象

    這篇文章主要介紹了Vertx基于EventBus發(fā)送接受自定義對(duì)象,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-11-11

最新評(píng)論