vue中使用ts后,父组件获取执行子组件方法报错问题

一、问题产生背景:

  子组件的一个方法:

update () {
      this.$nextTick(() => {
        this.ul_slots.forEach((ul, cur_slots_index) => {
          if (ul.getAttribute("class").indexOf("select_slots") < 0) {
            return;
          }
          let liHeight = ul.children[0].offsetHeight
          ul.style.height = (liHeight * ul.children.length) + 'px'
        });
      });
    }

  父组件通过ref获取执行子组件的方法:

 this.$refs.areapicker.update();

  TS报错:

 

二、尝试解决

(1)将整个子组件实例发送给父组件接受,再调用

// 子组件发送事件,传本身实例
this.$emit('passpicker', this)
// 父组件接受事件
<areapicker2  @passpicker = "passpicker">
</areapicker2>
// 父组件js声明变量并接受传值
picker: any = '';
passpicker (picker: any) {
        console.log(picker)
        this.picker = picker;
 }
// 父组件里执行子组件方法
this.picker.update();

 

posted @ 2019-07-17 16:07  奋斗中的小人物  阅读(1813)  评论(0编辑  收藏  举报