小程序中如何在页面中触发引用的子组件中的事件

Question

我想要触发子组件中的事件的主要是为了触发子组件中的动画事件，如果只是单纯的显示隐藏直接就可以实现，但是要触发动画的话就必须在子组件中触发某个事件，类似creatanimation之类的，如果直接写在页面中就没意义了，因为每个页面都写的话代码就重复了，所以我在想有没可以直接触发子组件中的事件或者监听子组件中某个数据的变化然后触发方法

下面是子组件的大致代码内容

<view class='wxtoast' wx:if="{{WxtoastShow}}">
  {{WxtoastContent}}
</view>

Component({
  /**
   * 组件的属性列表
   */
  properties: {
      WxtoastShow:{
        type:Boolean,
        value:true
      },
      WxtoastContent:{
        type:String,
        value:'this is toast'
      }
  },

  /**
   * 组件的初始数据
   */
  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>
那我如何点击按钮触发wxtoast 这个组件的中的ShowToast（）方法呢？

Answer 1

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

page.wxml:
{
"usingComponents": {

"component-name": "component/route"

}
}

page.js:
Page({

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

})

Answer 2

不好意思看错了，以为是vueJS的，请先忽略

添加ref

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

调用方法

this.$refs.toast.ShowToast()

Answer 3

解决了吗？我也遇到这个问题

Answer 4

请问这个问题解决了吗？我也是遇到这样情况呀！！！