詳解微信小程序中組件通訊
這篇主要講組件通訊
(1)父組件向子組件傳值:
<header title='{{title}}' bind:fn='fn' id='header'></header>
通過(guò)title='{{title}}'傳向子組件向子組件傳遞參數(shù)
子組件接收參數(shù):
Component({ properties: { title: { // 屬性名 type: Number, // 類型(必填) type: String,//目前接受的類型包括:String, Number, Boolean, Object, Array, null(表示任意類型) }, fn: { type: Function, }, }, data: { }, methods: { // 子組件調(diào)用父組件方法 childFn() { console.log(this.data.title) this.triggerEvent("fn"); //triggerEvent函數(shù)接受三個(gè)值:事件名稱、數(shù)據(jù)、選項(xiàng)值 } } })
methods使用title時(shí) this.data.title 直接就可以獲取到
通過(guò) bind:fn='fn'傳向子組件向子組件傳遞方法
方法同樣也要在properties接收,methods里定義一個(gè)新方法, this.triggerEvent("fn") 接收父組件傳遞過(guò)來(lái)的方法
(2)父組件調(diào)用子組件數(shù)據(jù)及方法:
首先在父組件js onReady 生命周期中獲取到組件
onReady: function () { //獲得popup組件 this.header= this.selectComponent("#header"); },
比如要調(diào)用子組件的一個(gè)function方法
// 調(diào)用子組件方法 fn(){ this.header.fn() //子組件的方法 },
調(diào)用子組件數(shù)據(jù)的話直接 this.header.msg 就可以拿到子組件的數(shù)據(jù)
相關(guān)文章
js利用Array.splice實(shí)現(xiàn)Array的insert/remove
從一個(gè)數(shù)組中移除一個(gè)或多個(gè)元素,如果必要,在所移除元素的位置上插入新元素,返回所移除的元素。2009-01-01uniapp實(shí)現(xiàn)點(diǎn)擊出現(xiàn)彈窗功能實(shí)例
這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)點(diǎn)擊出現(xiàn)彈窗功能的相關(guān)資料,UniApp框架中提供了兩種不同類型的彈出框,以幫助我們滿足不同的需求,需要的朋友可以參考下2023-08-08JavaScript中textRange對(duì)象使用方法小結(jié)
這篇文章主要介紹了JavaScript中textRange對(duì)象使用方法小結(jié),需要的朋友可以參考下2015-03-03關(guān)于JSONP跨域請(qǐng)求原理的深入解析
JSONP(JSON?with?Padding)是JSON的一種“使用模式”,可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問(wèn)的問(wèn)題,這篇文章主要給大家介紹了關(guān)于JSONP跨域請(qǐng)求原理的相關(guān)資料,需要的朋友可以參考下2022-01-01JS文本框追加多個(gè)下拉框的值的簡(jiǎn)單實(shí)例
這篇文章介紹了JS文本框追加多個(gè)下拉框的值的例子,有需要的朋友可以參考一下2013-07-07用Js實(shí)現(xiàn)的動(dòng)態(tài)增加表格示例自己寫的
動(dòng)態(tài)增加表格的方法有很多,但大多說(shuō)實(shí)現(xiàn)起來(lái)比較繁瑣,本文的這個(gè)示例是作者自己手寫的,經(jīng)測(cè)試效果還不錯(cuò),但唯獨(dú)不兼容FF,感興趣的朋友可以參考下2013-10-10部分網(wǎng)站允許空白referer的防盜鏈圖片的js破解代碼
主要是有些網(wǎng)站的圖片調(diào)用是防盜鏈的但一般只是判斷referer是不是自己網(wǎng)站,如果referer為空也會(huì)顯示圖片,所以有了下面的代碼。2011-05-05相冊(cè)展示PhotoSwipe.js插件實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了相冊(cè)展示PhotoSwipe.js插件實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08