mpvue中使用selectComponent获取自定义组件实例

一、mpvue中无法使用selectComponent的解决办法

this.$mp.page.selectComponent('.xxx')

其中xxx是父组件中使用了这个组件并且设置了一个 id 或是class 类样式

二、这里用vant Weapp中countDown倒计时组件举个例子

手动控制
通过 selectComponent 选择器获取到组件实例后，可以调用start、pause、reset方法

这是vant Weapp中给出的代码自行查看https://vant-contrib.gitee.io/vant-weapp/#/count-down.

实现如图功能，进行手动控制倒计时。

这里放在mpvue中使用的代码

<template>
   <div>
     <van-count-down
       class="control-count-down"
       millisecond
       :time="3000"
       :auto-start="false"
       format="ss:SSS"
     />
     <van-grid clickable column-num="3">
       <van-grid-item text="开始" icon="play-circle-o" @click="start" />
       <van-grid-item text="暂停" icon="pause-circle-o" @click="pause" />
       <van-grid-item text="重置" icon="replay" @click="reset" />
     </van-grid>
   </div>
</template>

<script>
export default{
    data(){
      return{
      }
    },
    methods:{
      start() {
        const countDown = this.$mp.page.selectComponent('.control-count-down')
        countDown.start();
      },
      pause() {
        const countDown = this.$mp.page.selectComponent('.control-count-down')
        countDown.pause();
      },
      reset() {
        const countDown = this.$mp.page.selectComponent('.control-count-down')
        countDown.reset();
      }
   }
}
</script>

<style>

</style>

这里 this.$mp.page.selectComponent(’.xxx’)中的.xxx是组件van-count-down的class的样式control-count-down