在普通js文件中,如果需要访问Vue实例的数据或者方法,需要通过Vue实例的引用来获取this指针。
一、通过Vue.createApp创建Vue实例
如果我们通过Vue.createApp创建Vue实例,我们可以使用provide和inject来将Vue实例注入到普通js文件中,使其能够访问Vue实例。具体步骤如下:
const app = Vue.createApp({
data() {
return {
message: "Hello Vue!"
}
},
}).provide("vueInstance", this);
const app = Vue.createApp({});
app.mixin({
inject: ["vueInstance"]
})
获取Vue实例之后,就可以通过this指针访问Vue实例的数据或者方法了。例如,在普通js文件中访问实例的message属性:
console.log(this.vueInstance.message);
二、通过new Vue创建Vue实例
如果我们通过new Vue创建Vue实例,则需要对Vue.prototype进行扩展。具体步骤如下:
Vue.prototype.$get = function() {
return this;
}
const vueInstance = new Vue({
data: {
message: "Hello Vue!"
}
});
const instance = vueInstance.$get();
获取Vue实例之后,就可以通过this指针访问Vue实例的数据或者方法了。例如,在普通js文件中访问实例的message属性:
console.log(instance.message);
以上是普通js文件中如何访问Vue实例的完整攻略,可以根据实际需要选择使用哪种方法。
本文链接:http://task.lmcjl.com/news/11165.html