關(guān)于Vue3中defineProps用法圖文詳解

更新時(shí)間：2022年11月12日 15:31:23 作者：韓振方

在vue3中組件傳參有很多種方式,和v2大差不差,但是有的地方還是有很多的區(qū)別,下面這篇文章主要給大家介紹了關(guān)于Vue3中defineProps用法的相關(guān)資料,需要的朋友可以參考下

之前只是單純的會(huì)用，因?yàn)関ue關(guān)于父子組件通訊差別有一點(diǎn)點(diǎn)大。

1.在父組件內(nèi)傳遞變量的時(shí)候，需要加冒號(hào):，否則你就只是單純的傳遞了一個(gè)字符串而已。

2.在子組件里不需要引入defineProps就可調(diào)用該函數(shù)去接收父組件傳來(lái)的屬性。

我個(gè)人在這里給自己提醒?，可能我太迷糊了。

這里需要注意?。∵@是definePropsAPI是一個(gè)函數(shù)，它的返回值就是父親傳來(lái)的屬性。

3.剛開(kāi)始讓我感到奇怪的是，我好像不用變量去接收，在template里也能正常使用。

那我還用變量接收干啥呢？這個(gè)API的返回值有毛線用??？

也不用像React那樣變量前面都得加一個(gè)props.才可以訪問(wèn)，也沒(méi)有結(jié)構(gòu)去拿。這么方便嗎？

4.恍然大悟

原來(lái)在script標(biāo)簽里直接拿屬性用是拿不到的…

這里變量名不一定非得是props，js可并沒(méi)有規(guī)定不允許漢字作為變量名哦

下次聊聊defineEmits，主要react的一些思想還沒(méi)完全轉(zhuǎn)變到vue上，還需努力！

總結(jié)

到此這篇關(guān)于關(guān)于Vue3中defineProps用法的文章就介紹到這了,更多相關(guān)Vue3中defineProps用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

動(dòng)畫(huà)詳解Vue3的Composition?Api
為讓大家更好的理解Vue3的Composition?Api本文采用了詳細(xì)的動(dòng)畫(huà)演繹，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
前端實(shí)現(xiàn)Vue組件頁(yè)面跳轉(zhuǎn)的多種方式小結(jié)
這篇文章主要為大家詳細(xì)介紹了前端實(shí)現(xiàn)Vue組件頁(yè)面跳轉(zhuǎn)的多種方式,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,有需要的小伙伴可以了解下
2024-02-02
關(guān)于Vue的路由權(quán)限管理的示例代碼
本篇文章主要介紹了關(guān)于Vue的路由權(quán)限管理的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
vue2 v-model/v-text 中使用過(guò)濾器的方法示例
這篇文章主要介紹了vue2 v-model/v-text 中使用過(guò)濾器的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
el-table表頭根據(jù)內(nèi)容自適應(yīng)完美解決表頭錯(cuò)位和固定列錯(cuò)位
這篇文章主要介紹了el-table表頭根據(jù)內(nèi)容自適應(yīng)完美解決表頭錯(cuò)位和固定列錯(cuò)位,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
vue開(kāi)發(fā)實(shí)現(xiàn)評(píng)論列表
這篇文章主要為大家詳細(xì)介紹了vue開(kāi)發(fā)實(shí)現(xiàn)評(píng)論列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
mpvue開(kāi)發(fā)音頻類(lèi)小程序踩坑和建議詳解
這篇文章主要介紹了mpvue開(kāi)發(fā)音頻類(lèi)小程序踩坑和建議詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-03-03
vue3中做文件預(yù)覽的項(xiàng)目實(shí)踐
本文主要介紹了在Vue3項(xiàng)目中實(shí)現(xiàn)常見(jiàn)文件類(lèi)型的預(yù)覽功能,包括docx、xlsx、pdf、txt、png、jpg、jpeg、mp4和mp3,具有一定的參考價(jià)值,感興趣的可以了解一下
2025-01-01
vue與bootstrap實(shí)現(xiàn)時(shí)間選擇器的示例代碼
本篇文章主要介紹了vue與bootstrap實(shí)現(xiàn)時(shí)間選擇器的示例代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-08-08
用Cordova打包Vue項(xiàng)目的方法步驟
這篇文章主要介紹了用Cordova打包Vue項(xiàng)目的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02