zoukankan      html  css  js  c++  java
  • 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();
  • 相关阅读:
    BZOJ3473: 字符串
    BZOJ1088: [SCOI2005]扫雷Mine
    跪啃SAM
    BZOJ3932: [CQOI2015]任务查询系统
    BZOJ3545: [ONTAK2010]Peaks
    06.约束
    05.数据表的创建与简单操作
    04.数据库的创建
    安卓6.0后运行时权限封装
    OkGo使用缓存
  • 原文地址:https://www.cnblogs.com/ahao68/p/11201581.html
Copyright © 2011-2022 走看看