uniapp 封裝組件的方法實例分析
最近研究了一下uniapp 的組件封裝 以及 引入組件的頁面(父級) 和 組件封裝的頁面(子級)的傳參以及 事件交互 ,其實還是很簡單的。
父級頁(主要的動作有組件的引入和事件的觸發(fā))
<!--viwe部分--> <template> <view> <!--調(diào)用組件 組件的屬性 數(shù)據(jù)屬性前面加 : 符號 事件加 @ 符號 因為父級頁面無法直接改變子頁面參數(shù) 可通過ref屬性可調(diào)用子頁的方法改變參數(shù)值 --> <Assembly :TitleData="name" @trigger="GetData" ref="mySon"> <!-- 如果父級頁面需要在組件中間加入代碼 需要子頁 插入的地方加上<slot></slot> --> </Assembly> <!--調(diào)用組件--> </view> </template> <!--js部分 在這里聲明注冊組件--> <script> //只要組件安裝在項目的components目錄下或uni_modules目錄下,并符合components/組件名稱/組件名稱.vue目錄結(jié)構(gòu)。就可以不用引用、注冊,直接在頁面中使用。 import Assembly from '@/components/assembly' export default { components: { Assembly }, data() { return { name:"" //這里的數(shù)據(jù)類型根據(jù)子級頁定義 } }, methods: { GetData(){ console.log(觸發(fā)事件了) //這里觸發(fā)父級事件 通過綁定名稱mySon 直接執(zhí)行子頁方法foumr() t.$refs.mySon.foumr(); } } } </script>
到這里 組件的調(diào)用 引入 注冊 以及 數(shù)據(jù)和事件 基本 搞定了 然后來看下面
子頁面(組件的存放和組件事件處理)
<template> <view> <view @click="SetName">姓名:{{TitleData}}</view> <view>性別:{{gender}}</view> <!--使用slot組件聲明插入代碼的位置--> <slot></slot> </view> </template> <script> export default { //需要給父頁傳值的參數(shù)都放在props里面 每個參數(shù)作為一個對象 都需要聲明 傳值的類型 type 以及內(nèi)容 default 沒有默認值時為空 type不可為空 ,如參數(shù)的值無需 交互 可直接寫在 data=>return 里面 props: { //這里定義的參數(shù)名稱 在父頁作為組件的屬性用來綁定參數(shù) TitleData:{ type:Array, default:"" } }, data() { return { gender:"男女" }; }, methods: { SetName(){ // 在這里定義父頁觸發(fā)組件事假的屬性名 trigger 后面可以傳值 index this.$emit('trigger',index) }, }, }; </script>
相關(guān)文章
JavaScript實現(xiàn)QueryString獲取GET參數(shù)的方法
本文為大家詳細介紹下如何通過JavaScript實現(xiàn)QueryString獲取GET參數(shù),具體實現(xiàn)如下,感興趣的朋友可以參考下哈,希望對大家有所幫助2013-07-07JS數(shù)組排序技巧匯總(冒泡、sort、快速、希爾等排序)
這篇文章主要介紹了JS數(shù)組排序技巧,實例匯總了JavaScript冒泡排序、sort排序、快速排序、希爾排序等,并附帶分析了sort排序的相關(guān)注意事項,需要的朋友可以參考下2015-11-11javascript實現(xiàn)在網(wǎng)頁中運行本地程序的方法
這篇文章主要介紹了javascript實現(xiàn)在網(wǎng)頁中運行本地程序的方法,實例分析了JavaScript基于ActiveXObject運行本地程序的技巧,需要的朋友可以參考下2016-02-02JavaScript通過正則表達式實現(xiàn)表單驗證電話號碼
JavaScript判斷一個輸入量是否為電話號碼,通過正則表達式實現(xiàn),需要的朋友可以參考下2014-03-03JavaScript使用slice函數(shù)獲取數(shù)組部分元素的方法
這篇文章主要介紹了JavaScript使用slice函數(shù)獲取數(shù)組部分元素的方法,涉及javascript中slice方法的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04js string 轉(zhuǎn) int 注意的問題小結(jié)
Javascript將string類型轉(zhuǎn)換int類型的過程中總會出現(xiàn)不如意的問題,下面為大家介紹下js string轉(zhuǎn)int的一些注意的問題,感興趣的朋友可以參考下2013-08-08在layui中使用form表單監(jiān)聽ajax異步驗證注冊的實例
今天小編就為大家分享一篇在layui中使用form表單監(jiān)聽ajax異步驗證注冊的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JS實現(xiàn)駝峰字符串轉(zhuǎn)下劃線字符串的三種方法
這篇文章主要介紹了js下劃線和駝峰互相轉(zhuǎn)換的實現(xiàn),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2023-11-11myFocus slide3D v1.1.0 使用方法與下載
myFocus slide3D v1.1.0 使用方法與下載,需要的朋友可以參考下。2011-01-01