小程序如何改变自定义组件的值、自定义组件如何触发事件回调

308 阅读1分钟

微信小程序如何在页面的js里改变自定义组件的值?

(1)先在页面js里获取组件对象, this.selectComponent('#dialog')

(2)调用组件对象的方法,this.dialog.showDialog()

// 页面.js
onReady(){
  // 获得dialog组件
  this.dialog = this.selectComponent('#dialog')
},
bintTapShowDialog(){
  // 通过组件对象调用组件内的方法
  this.dialog.showDialog()
}
// dialog.js
Component({
  data:{
    isShow:false
  },
  methods() {
    // 显示页面
    showDialog(){
      this.setData({
        isShow: !this.data.isShow
      }) 
    }
  }
})

微信小程序如何在页面的js里使用组件的回调?

triggerEvent

// dialog.js
Component({
  data:{
    isShow:false
  },
  methods() {
    // 显示页面
    showDialog(){
      this.setData({
        isShow: !this.data.isShow
      }) 
    },
    cancelEvent(){
      // 触发回调
      this.triggerEvent('cancelEvent')
    }
  }
})
// index.wxml
<dialog id="dialog"
   title="标题"
   bind:cancelEvent="cancelFn"
></dialog>
// index.js
onReady(){
  // 获得dialog组件
  this.dialog = this.selectComponent('#dialog')
},
bintTapShowDialog(){
  // 通过组件对象调用组件内的方法
  this.dialog.showDialog()
},

// 由组件内部发起的事件
cancelFn(){
	
}