如何访问子组件的方法？

Question

我有一个子组件，它内置在父组件中。我想从父母那里访问孩子的方法。我想为此使用$refs。

模板：

<template>
  <div>Parent!</div>
</template>

脚本：

<script>
    Vue.component('child',{
      template: `<div>I am child</div>`,
    }
    export default {
       name: 'Parent'
    }
</script>

在这种情况下如何为孩子声明$refs？

Answer 1

为此，您可以使用ref属性为子组件分配一个参考ID。

<template>
  <div>Parent!</div>
  <child ref="childComponent"/>
</template>

现在，您可以像这样使用父组件来访问子组件实例：

this.$refs.childComponent // where componentName is the ref value

这也意味着您可以执行在子组件下定义的方法。

this.$refs.childComponent.myFunction();

有关更多详细信息，请参见docs。