關(guān)于Vue3中defineProps用法圖文詳解
之前只是單純的會(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的返回值有毛線用?。?/p>
也不用像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)文章希望大家以后多多支持腳本之家！
- Vue3中defineProps設(shè)置默認(rèn)值的方法實(shí)現(xiàn)
- vue3中defineProps及使用方法詳解
- vue3 setup中defineEmits與defineProps的使用案例詳解
- 一文詳細(xì)聊聊vue3的defineProps、defineEmits和defineExpose
- Vue3報(bào)錯(cuò)‘defineProps‘?is?not?defined的解決方法
- Vue3中watch監(jiān)聽(tīng)對(duì)象的屬性值(監(jiān)聽(tīng)源必須是一個(gè)getter函數(shù))
- Vue3屬性值傳遞defineProps詳解
相關(guān)文章
在當(dāng)今前端開(kāi)發(fā)的領(lǐng)域中,Vue 框架因其高效和靈活的特性備受開(kāi)發(fā)者青睞,而 Vant 是一個(gè)輕量的移動(dòng)端組件庫(kù),為 Vue 應(yīng)用的開(kāi)發(fā)提供了豐富且便捷的功能組件,本文將就如何在 Vue 框架中通過(guò) Vant 來(lái)實(shí)現(xiàn)日期選擇器的使用,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了在antd4.0中Form使用initialValue操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要幫助大家簡(jiǎn)單理解Vue條件渲染，什么是Vue條件渲染,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
vue treeselect獲取當(dāng)前選中項(xiàng)的label實(shí)例
這篇文章主要介紹了vue treeselect獲取當(dāng)前選中項(xiàng)的label實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
前端vue如何通過(guò)URL訪問(wèn)存儲(chǔ)在服務(wù)器或磁盤的圖片
在Vue中,通常需要將圖片存儲(chǔ)在服務(wù)器端,并通過(guò)url地址來(lái)訪問(wèn),下面這篇文章主要給大家介紹了前端vue如何通過(guò)URL訪問(wèn)存儲(chǔ)在服務(wù)器或磁盤的圖片的相關(guān)資料,需要的朋友可以參考下2024-02-02
vue自定義權(quán)限標(biāo)簽詳細(xì)代碼示例
這篇文章主要給大家介紹了關(guān)于vue自定義權(quán)限標(biāo)簽的相關(guān)資料,在Vue中你可以通過(guò)創(chuàng)建自定義組件來(lái)實(shí)現(xiàn)自定義標(biāo)簽組件,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09
基于vue3.0.1beta搭建仿京東的電商H5項(xiàng)目
這篇文章主要介紹了基于vue3.0.1beta搭建仿京東的電商H5項(xiàng)目，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Vue重要修飾符.sync對(duì)比v-model的區(qū)別及使用詳解
這篇文章主要為大家介紹了Vue中重要修飾符.sync與v-model的區(qū)別對(duì)比及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家詳細(xì)介紹了Vue加載中動(dòng)畫組件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
在Vue應(yīng)用程序中,路由組件是構(gòu)建單頁(yè)應(yīng)用的關(guān)鍵部分,傳遞參數(shù)給路由組件可以讓我們動(dòng)態(tài)地展示內(nèi)容,處理用戶輸入,以及實(shí)現(xiàn)各種交互功能,本文就給大家介紹了六種Vue路由組件傳遞參數(shù)場(chǎng)景,需要的朋友可以參考下2023-09-09