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

（1）頁面向自定義組件傳值

?調用頁面通過標簽的屬性值進行傳值：

組件：

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

調用頁面：

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

（2）頁面調用自定義組件方法

組件中定義方法

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

調用頁面（selectComponent）：

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

（3）自定義組件傳值給調用頁面

組件中觸發方法,傳值

onTap: function(){var myEventDetail = {} // detail對象，提供給事件監聽函數var myEventOption = {} // 觸發事件的選項this.triggerEvent('myevent', myEventDetail, myEventOption)}

調用頁面：

<!-- 當自定義組件觸發“myevent”事件時，調用“onMyEvent”方法 --> <component-tag-name bindmyevent="onMyEvent" /> <!-- 或者可以寫成 --> <component-tag-name bind:myevent="onMyEvent" />

js(detail傳遞數據)

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

?

轉載于:https://www.cnblogs.com/codeww/p/9064832.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。