在Vue项目中进行工具类封装时,想访问Vue实例,你会怎么做?
本文将跟各位开发者分享一种解决方案,欢迎各位感兴趣的开发者阅读本文。
import Vue from "vue"; import layer from "vue-layer"; import "vue-layer/lib/vue-layer.css"; import utils from "./utils/index"; Vue.prototype.$layer = layer(Vue); Vue.prototype.$vb = utils; new Vue({ router, store, render: h => h(App) }).$mount("#app"); 复制代码
const layerUtil = { // 打开组件窗口 openLayer(componentName, props, layerWidth, layerHeight, title) { this.$layer.iframe({ content: { // 子组件 content: componentName, parent: this, // 子组件传值 data: props }, area: [`${layerWidth}px`, `${layerHeight}px`], title: title, // 关闭事件 cancel: () => {} }); }, // 显示消息提示 showMsg(msg) { this.$layer.msg(msg); } }; export default layerUtil; 复制代码
如图所示,控制台会报错: msg未定义,原因是工具类中的this指向的是当前文件,而不是Vue实例
/* 其他内容省略 */ const vue = new Vue({ router, store, render: h => h(App) }).$mount("#app"); export default vue; 复制代码
import vue from "@/main"; const layerUtil = { // 打开组件窗口 openLayer(componentName, props, layerWidth, layerHeight, title) { vue.$layer.iframe({ content: { // 子组件 content: componentName, parent: this, // 子组件传值 data: props }, area: [`${layerWidth}px`, `${layerHeight}px`], title: title, // 关闭事件 cancel: () => {} }); }, // 显示消息提示 showMsg(msg) { vue.$layer.msg(msg); } }; export default layerUtil; 复制代码
如图所示,控制台依然报错,msg未定义,原因是:拿不到当前vue实例
const layerUtil = { // 打开组件窗口 openLayer(VueObject, componentName, props, layerWidth, layerHeight, title) { VueObject.$layer.iframe({ content: { // 子组件 content: componentName, parent: this, // 子组件传值 data: props }, area: [`${layerWidth}px`, `${layerHeight}px`], title: title, // 关闭事件 cancel: () => {} }); }, // 显示消息提示 showMsg(VueObject, msg) { VueObject.$layer.msg(msg); } }; export default layerUtil; 复制代码
import layerUtil from "@/utils/layerUtil"; export default { name: "index", mounted() { layerUtil.showMsg(this, "弹层工具类调用测试"); } }; 复制代码
如图所示,成功访问到了原型上的方法,当然将实例作为参数这种解决方案,不止能访问原型上的方法,也可以访问其他方法,比如路由。