uni-app自定義組件和通信的方式
更新時間：2024年03月01日 16:54:45 作者：小秀_heo
組件是 vue 技術(shù)中非常重要的部分,組件使得與ui相關(guān)的輪子可以方便的制造和共享,進(jìn)而使得vue使用者的開發(fā)效率大幅提升,組件可以使用全局注冊和頁面引入兩種方式進(jìn)行使用,對uni-app自定義組件和通信相關(guān)知識感興趣的朋友跟隨小編一起看看吧
（1）自定義組件概念
組件是 vue 技術(shù)中非常重要的部分，組件使得與ui相關(guān)的輪子可以方便的制造和共享，進(jìn)而使得vue使用者的開發(fā)效率大幅提升，在項目的component目錄下存放組件，uni-app 只支持 vue 單文件組件（.vue 組件）
組件可以使用「全局注冊」和「頁面引入」兩種方式進(jìn)行使用，使用分為三步：
導(dǎo)入 import xxx from 'xxx'
注冊 Vue.use('xx',xx) components:{ xxx }
使用 <xx />
（2）父子組件通信
- 父組件通過自定義屬性向子組件傳遞數(shù)據(jù)
- 子組件通過
props接收父組件傳遞的數(shù) - 父組件通過自定義事件標(biāo)簽向子組件傳遞事件
- 子組件通過觸發(fā)父組件定義事件方式修改父組件數(shù)據(jù)
（3）slot 數(shù)據(jù)分發(fā)與作用域插槽
- 父組件通過調(diào)用子組件內(nèi)部嵌套 html 內(nèi)容作為
slot分發(fā)給子組件 - 子組件通過在
slot標(biāo)簽上添加屬性，向父組件通信數(shù)據(jù)，作用域插槽
（4）全局事件定義及通信
- 在整個應(yīng)用的任何地方均可以使用
uni.$on創(chuàng)建一個全局事件 - 在整個應(yīng)用的任何地方也均可以使用
uni.$emit來觸發(fā)全局事件，實現(xiàn)多組件見的數(shù)據(jù)通信
到此這篇關(guān)于uni-app自定義組件和通信的文章就介紹到這了,更多相關(guān)uni-app自定義組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript showModalDialog傳值與FireFox的window.open 父子窗口傳值示例
javascript showModalDialog傳值與FireFox的window.open 父子窗口傳值示例代碼。2009-11-11
JavaScript canvas實現(xiàn)代碼雨效果
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實現(xiàn)代碼雨效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了javascript滾動圖片具體實現(xiàn)，有需要的朋友可以參考一下2013-11-11
JavaScript使用Math.random()生成簡單的驗證碼
今天小編就為大家分享一篇關(guān)于JavaScript使用Math.random()生成簡單的驗證碼，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要為大家詳細(xì)介紹了JavaScript初學(xué)者必看的“new”，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了JavaScript預(yù)編譯和暗示全局變量的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-09-09
JS實現(xiàn)瀏覽器菜單命令...2006-09-09
僅IE6/7/8中innerHTML返回值忽略英文空格的問題
僅IE6/7/8中innerHTML返回值忽略英文空格的問題，需要此問題的朋友可以參考下。2011-04-04
這篇文章主要介紹了JavaScript動態(tài)加載樣式表的方法,涉及javascript操作樣式表的技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JavaScript禁止用戶多次提交的兩種方法的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07