頁(yè)面中引用自定義組件，頁(yè)面與父組件如何交互吶？

（1）頁(yè)面向自定義組件傳值

?調(diào)用頁(yè)面通過(guò)標(biāo)簽的屬性值進(jìn)行傳值：

組件：

Component({/*** 組件的屬性列表*/properties: {boxType:{//設(shè)置彈框類型 type:String,default:'input'},}, }）

調(diào)用頁(yè)面：

<dialog-box id="dialogBox" box-type="input"></dialog-box>

（2）頁(yè)面調(diào)用自定義組件方法

組件中定義方法

methods: {toggle:function(){//開(kāi)啟、關(guān)閉彈框this.setData({isClose: !this.data.isClose})}, }

調(diào)用頁(yè)面（selectComponent）：

this.dialogBox = this.selectComponent("#dialogBox"); this.dialogBox.toggle();//開(kāi)啟彈框

（3）自定義組件傳值給調(diào)用頁(yè)面

組件中觸發(fā)方法,傳值

onTap: function(){var myEventDetail = {} // detail對(duì)象，提供給事件監(jiān)聽(tīng)函數(shù)var myEventOption = {} // 觸發(fā)事件的選項(xiàng)this.triggerEvent('myevent', myEventDetail, myEventOption)}

調(diào)用頁(yè)面：

<!-- 當(dāng)自定義組件觸發(fā)“myevent”事件時(shí)，調(diào)用“onMyEvent”方法 --> <component-tag-name bindmyevent="onMyEvent" /> <!-- 或者可以寫(xiě)成 --> <component-tag-name bind:myevent="onMyEvent" />

js(detail傳遞數(shù)據(jù))

Page({onMyEvent: function(e){e.detail // 自定義組件觸發(fā)事件時(shí)提供的detail對(duì)象 } })

?

轉(zhuǎn)載于:https://www.cnblogs.com/codeww/p/9064832.html

總結(jié)

以上是生活随笔為你收集整理的探秘小程序（9）：父页面与自定义组件交互的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。