Vue 组件实例可以通过以下方法获取：this 上下文：在组件模板中使用 this 访问当前组件实例。$refs 属性：通过 $refs 属性访问组件实例，前提是组件具有 ref 属性。provide/inject：通过 provide/inject 依赖注入机制访问父组件实例。DOM 元素的 vue 属性：如果组件渲染到 DOM 中，可以通过 vue 属性访问组件实例。

如何获取 Vue 组件实例

Vue 组件实例代表组件的一个特定实例，它可以通过以下方法获取：

1. this 上下文

在组件模板中，可以使用 this 访问当前组件实例。

<template><div>{{ this.message }}</div>
</template><script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

2. $refs 属性

可以通过 $refs 属性访问组件实例，前提是组件具有 ref 属性。

Vue Wrap

Vue 入门指南 — JavaScript 框架

下载

<template><child ref="child"></child></template><script>
export default {
  methods: {
    getChildInstance() {
      console.log(this.$refs.child);
    }
  }
};
</script>

3. provide/inject

可以通过 provide/inject 依赖注入机制访问父组件实例。

<!-- 父组件 -->
<template><child v-provide="provideData"></child></template><script>
export default {
  provide() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script><!-- 子组件 --><template><div>{{ provideMessage }}</div>
</template><script>
export default {
  inject: ['provideMessage'],
};
</script>

4. DOM 元素的 __vue__ 属性

如果组件渲染到 DOM 中，可以通过 __vue__ 属性访问组件实例。

<div id="my-component"></div>

const componentInstance = document.getElementById('my-component').__vue__;

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！