使用带有 CDN vue.js 的父组件中的子组件的方法

Question

我只是从 alpine.js 切换到 vue.js (cdn)，因为我尝试使用异步函数。我的目标是从组件中定义的父级调用方法。

但是当我想在我的 html 文件中调用 "test()" 时，我收到错误 "无法读取未定义的属性（阅读 'childRef'）” 当在“app”元素（父元素）定义方法时一切正常，但我不想用不同的方法使这个元素混乱。

预先感谢您对我的代码提出的所有提示或评论。

代码片段Vue/Javascript

--------------------------------------
const app = Vue.createApp ({
  data() {
    return {
      visible: false,
      openTab: ''
    }
  },
  methods: {
    test() {
      this.$resfs.childRef.getMyDevices();
    }
  }
})
--------------------------------------
app.component('child',{
  data() {
    return {
      myDevices: {},
    }
  },
  methods: {
    async getMyDevices() {
      const response = await foo.getMyDevices();
      const data = await {...response.devices};

      this.myDevices = data;
    }
  },
  template: `<div ref="childRef"></div>`
})

代码片段HTML

<div @click="test()>
  <child ref="childRef"></child>
</div>

Answer 1

您的 $refs 访问有错别字：

methods: {
    test() {
      this.$refs.childRef.getMyDevices(); // $resfs befores
    }
  }

Answer 2

你的问题有错别字，请更正参考拼写

this.$refs.childRef.getMyDevices()

如果上述方法不起作用，请尝试使用

this.$children[0].getMyDevices()

使用带有 CDN vue.js 的父组件中的子组件的方法

Use method from child component in parent with CDN vue.js

cdn

vue.js

vue-component