使用CDN版Vue.js时父组件调用子组件方法报childRef未定义如何解决

问题修复方案 #

你代码中存在以下几处可直接修复的错误：

• 拼写错误：父组件test方法内的this.$resfs为笔误，正确语法是this.$refs
• HTML语法错误：点击事件绑定@click="test()缺少闭合双引号，会导致模板解析异常
• 冗余await：子组件getMyDevices方法中，{...response.devices}是同步对象展开操作，不需要加await
• 无效冗余：子组件模板内的ref="childRef"是子组件内部作用域的ref，和父组件绑定在<child>标签上的ref无关，无使用需求可以直接删除

修复后的Vue/JS代码 #

const app = Vue.createApp ({
  data() {
    return {
      visible: false,
      openTab: ''
    }
  },
  methods: {
    test() {
      // 修正ref拼写错误
      this.$refs.childRef.getMyDevices();
    }
  }
})

app.component('child',{
  data() {
    return {
      myDevices: {},
    }
  },
  methods: {
    async getMyDevices() {
      const response = await foo.getMyDevices();
      // 移除冗余的await
      const data = {...response.devices};
      this.myDevices = data;
    }
  },
  template: `<div></div>`
})

修复后的HTML代码 #

<!-- 补全事件绑定的闭合引号 -->
<div @click="test()">
  <child ref="childRef"></child>
</div>

内容的提问来源于stack exchange，提问作者m_s