Vue组件通讯$refs获取组件实例例子

在Vue中，$refs 是一个对象，它持有注册过 ref 特性 (attribute) 的所有 DOM 元素和子组件实例。你可以使用 $refs 在父组件中直接访问子组件的实例或者 DOM 元素。

下面是一个使用 $refs 获取子组件实例的例子：

首先，我们有一个子组件 ChildComponent.vue：

vue

<template>

  <div>

    <p>我是子组件</p>

    <button @click="sayHello">点击我</button>

  </div>

</template>

<script>

export default {

  methods: {

    sayHello() {

      console.log('Hello from ChildComponent!');

    }

  }

}

</script>

然后，在父组件中，我们使用 ref 属性给子组件注册一个引用名 childRef：

vue

<template>

  <div>

    <p>我是父组件</p>

    <ChildComponent ref="childRef" />

    <button @click="callChildMethod">调用子组件方法</button>

  </div>

</template>

<script>

import ChildComponent from './ChildComponent.vue'

export default {

  components: {

    ChildComponent

  },

  methods: {

    callChildMethod() {

      // 使用 $refs 访问子组件实例

      this.$refs.childRef.sayHello();

    }

  }

}

</script>

在这个例子中，当点击父组件中的“调用子组件方法”按钮时，callChildMethod 方法会被调用，该方法使用 $refs.childRef 访问了子组件的实例，并调用了子组件的 sayHello 方法。

注意：$refs 只在组件渲染完成后才填充，并且它们不是响应式的。你不应该试图使用它在模板中做数据绑定。通常，你会在组件的某个生命周期钩子中（如 mounted 或 updated）访问 $refs。