在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 小程序中如何在頁面中觸發(fā)引用的子組件中的事件

小程序中如何在頁面中觸發(fā)引用的子組件中的事件

我想要觸發(fā)子組件中的事件的主要是為了觸發(fā)子組件中的動畫事件,如果只是單純的顯示隱藏直接就可以實現(xiàn),但是要觸發(fā)動畫的話就必須在子組件中觸發(fā)某個事件,類似creatanimation之類的,如果直接寫在頁面中就沒意義了,因為每個頁面都寫的話代碼就重復(fù)了,所以我在想有沒可以直接觸發(fā)子組件中的事件或者監(jiān)聽子組件中某個數(shù)據(jù)的變化然后觸發(fā)方法

下面是子組件的大致代碼內(nèi)容

<view class='wxtoast' wx:if="{{WxtoastShow}}">
  {{WxtoastContent}}
</view>
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
      WxtoastShow:{
        type:Boolean,
        value:true
      },
      WxtoastContent:{
        type:String,
        value:'this is toast'
      }
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {
    ShowToast() {
      this.setData({
        WxtoastShow: true
      })
      let timer = setTimeout(()=>{
        this.HideToast()
      },2000)
    },
    HideToast() {
      this.setData({
        WxtoastShow: false
      })
    }
  }
})

然后在頁面中引用這個組件

<wxtoast WxtoastShow="{{ToastShow}}" WxtoastContent="{{ToastText}}" />
<view class='btn' bindtap='ShowToast'> 
    按鈕
</view>
那我如何點擊按鈕觸發(fā)wxtoast 這個組件的中的ShowToast()方法呢?



回答
編輯回答
尤禮

page.wxml:
<component-name id="componentId"></component-name>

page.wxml:
{
"usingComponents": {

"component-name": "component/route"

}
}

page.js:
Page({

onload(){
    this.selectComponent("#componentId").subComponentMethod();
}

})

2017年5月25日 02:59
編輯回答
情已空

不好意思看錯了,以為是vueJS的,請先忽略

添加ref

<wxtoast ref="toast" WxtoastShow="{{ToastShow}}" WxtoastContent="{{ToastText}}" />

調(diào)用方法

this.$refs.toast.ShowToast()
2018年7月17日 11:18