vue怎么获取对象
如何获取 vue 对象?this 关键字:引用当前组件实例。refs:通过元素的 ref 属性获取组件实例。vue.prototype:引用 vue 根实例,可从任何组件或根实例访问。$root:引用组件的根 vue 实例,仅限子组件使用。注入:通过 provide 和 inject 选项在组件之间传递数据和方法。
如何获取 Vue 对象
Vue 提供了多种方法来获取组件或根实例对象。
获取组件实例
this
立即学习“前端免费学习笔记(深入)”;
this 关键字引用当前组件实例。它只能在组件方法和计算属性中使用。
methods: { onClick() { console.log(this); // 引用组件实例 }}
refs
refs 允许你通过元素的 ref 属性直接获取组件实例。
<template><div ref="myComponent"></div></template><script>export default { mounted() { console.log(this.$refs.myComponent); // 引用组件实例 }}</script>
获取根实例
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(); // 调用注入的方法 }};