小程序 自定義組件 子組件傳父組件 父組件傳子組件

場(chǎng)景:多個(gè)頁(yè)面使用 UI畫面基本一致

舉個(gè)栗子:拿多個(gè)頁(yè)面 都有搜索框 點(diǎn)擊跳搜索頁(yè)面

實(shí)施:

? ? ? ? 創(chuàng)建公用組件頁(yè)面?search

? ??????search.wxml? ??

????????<view class="search">

? ????????<view class="search-inputView flex-align-center" bindtap=" callFather ">

? ? ????????<image src="/assets/icons/icon_fd.png" bindtap=" jumpsearch "></image>

? ? ????????<input placeholder="{{inputValue}}" value="" disabled></input>

? ????????</view>

????????</view>

? ??????search.css

????????.search {position: fixed;top: 0;z-index: 1001;width: 100%; background: #fff; left: 0;font-size: 28rpx;}

????????.flex-align-center{display: flex;align-items: center}

????????.search-inputView { width: 92%;box-sizing: border-box; margin: 20rpx 0;margin-left: 4%; height: 70rpx;line-height: 70rpx;

? ????????????background: rgba(245, 247, 252, 1);padding: 0 30rpx; border-radius: 45rpx;}

????????.search-inputView input {width: 85%;margin-left: 10rpx; margin-right: 20rpx;}

????????.search-inputView image {width: 35rpx;height: 35rpx;}

????????.scroll-view {position: fixed;top: 180rpx;left: 0;z-index: 10002;}

? ??????search.js

Component({

? properties: {

? ? inputValue: {

? ? ? type: String,

? ? ? value: 'default value',

? ? }

? },

? data: {

? ? // 這里是一些組件內(nèi)部數(shù)據(jù)

? ? someData: {}

? },

? created() {

? ? console.log('被使用了~~~')

? },

? methods: {

? ? jumpsearch: function() {

? ? ? wx.navigateTo({

? ? ? ? url: '/pages/search/search'

? ? ? })

? ? },

? ? // 子組件點(diǎn)擊 傳遞參數(shù)到父組件 調(diào)用父組件事件?

? ? callFather: function (e) {

? ? ? this.triggerEvent('callFather', e ) // callFather 自定義名稱事件莫瞬,父組件中接收

? ? },

? }

})

? ??????



? ? ? ?使用組件頁(yè)面

? ? ? ? index.wxml

? ??????<search inputValue="{{placeholderValue}}"? bind: callFather =" callFather "></search>

?????????index.json

? ??????{

????????????"navigationBarTitleText": "首頁(yè)",

? ? ? ? ? ?"usingComponents": {

? ? ? ? ? ????????"search": "../public/search",

? ????????????}

????????}

? ??????index.js

? ??????Page({

? ????????data: {placeholderValue:'哈哈哈'},

? ? ? ? ? ?callFather (e){

? ? ? ? ? ? console.log(e) //父組件接收 子組件傳遞的參數(shù)

????????????}????

????????})

? ? ? ? ? ? 注釋:公用組件的css 是獨(dú)立的? 沒法調(diào)用到app.css 的class

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末雷厂,一起剝皮案震驚了整個(gè)濱河市兆衅,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌鹃答,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異鳖眼,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)嚼摩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門钦讳,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人枕面,你說我怎么就攤上這事愿卒。” “怎么了潮秘?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵琼开,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我唇跨,道長(zhǎng)稠通,這世上最難降的妖魔是什么衬衬? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮改橘,結(jié)果婚禮上滋尉,老公的妹妹穿的比我還像新娘。我一直安慰自己飞主,他們只是感情好狮惜,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著碌识,像睡著了一般碾篡。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上筏餐,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天开泽,我揣著相機(jī)與錄音,去河邊找鬼魁瞪。 笑死穆律,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的导俘。 我是一名探鬼主播峦耘,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼旅薄!你這毒婦竟也來(lái)了辅髓?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤少梁,失蹤者是張志新(化名)和其女友劉穎洛口,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體猎莲,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡绍弟,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了著洼。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片樟遣。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖身笤,靈堂內(nèi)的尸體忽然破棺而出豹悬,到底是詐尸還是另有隱情,我是刑警寧澤液荸,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布瞻佛,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏伤柄。R本人自食惡果不足惜绊困,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望适刀。 院中可真熱鬧秤朗,春花似錦、人聲如沸笔喉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)常挚。三九已至作谭,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間奄毡,已是汗流浹背折欠。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留秧倾,地道東北人怨酝。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓傀缩,卻偏偏與公主長(zhǎng)得像那先,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子赡艰,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容