如何获取 Vue 对象?this 关键字:引用当前组件实例。refs:通过元素的 ref 属性获取组件实例。Vue.prototype:引用 Vue 根实例,可从任何组件或根实例访问。$root:引用组件的根 Vue 实例,仅限子组件使用。注入:通过 provide 和 inject 选项在组件之间传递数据和方法。

如何获取 Vue 对象
Vue 提供了多种方法来获取组件或根实例对象。
获取组件实例
this
立即学习“前端免费学习笔记(深入)”;
this 关键字引用当前组件实例。它只能在组件方法和计算属性中使用。
methods: {
onClick() {
console.log(this); // 引用组件实例
}
}refs
refs 允许你通过元素的 ref 属性直接获取组件实例。
获取根实例
Vue.prototype
Vue.prototype 引用 Vue 根实例。它可以从任何组件或根实例中访问。
Vue.prototype.myMethod = function() {
console.log('根实例方法');
};
new Vue({
mounted() {
this.myMethod(); // 访问根实例方法
}
});$root
$root 属性引用组件的根 Vue 实例。它只能在子组件中使用。
export default {
computed: {
rootData() {
return this.$root.data; // 引用根实例数据
}
}
}注入
注入允许你通过 provide 和 inject 选项在组件之间传递数据和方法。
// 父组件
export default {
provide: {
myData: {
value: 10
},
myMethod: {
value: () => {
console.log('根实例方法');
}
}
}
};
// 子组件
export default {
inject: ['myData', 'myMethod'],
mounted() {
console.log(this.myData); // 引用注入的数据
this.myMethod(); // 调用注入的方法
}
};










