Vue实现文件中的的实例访问??
2020/3/6 11:01:32
本文主要是介绍Vue实现文件中的的实例访问??,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
在Vue项目中进行工具类封装时,想访问Vue实例,你会怎么做?
本文将跟各位开发者分享一种解决方案,欢迎各位感兴趣的开发者阅读本文。
问题背景
- 在main.js中,Vue原型上挂载了$layer方法
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"); 复制代码
- 在layerUtil.js工具类中,对挂载在原型上的$layer方法,封装了几个常用函数
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; 复制代码
- 在工具类中我们使用了this.$layer.xx来访问原型上挂载的方法
- 在组件中调用工具类中的layerUtil.showMsg()函数
如图所示,控制台会报错: msg未定义,原因是工具类中的this指向的是当前文件,而不是Vue实例
踩坑记录
将Vue实例暴露出去
- 对main.js进行调整,导出Vue实例
/* 其他内容省略 */ const vue = new Vue({ router, store, render: h => h(App) }).$mount("#app"); export default vue; 复制代码
- 对工具类进行修改,在layerUtil.js工具类中,导入main.js,替换this为导入的main.js
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; 复制代码
- 在组件中调用工具类中的layerUtil.showMsg()函数
如图所示,控制台依然报错,msg未定义,原因是:拿不到当前vue实例
将实例作为参数传进来
- 对工具类进行修改,加多一个VueObject参数,调用时穿当前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, "弹层工具类调用测试"); } }; 复制代码
如图所示,成功访问到了原型上的方法,当然将实例作为参数这种解决方案,不止能访问原型上的方法,也可以访问其他方法,比如路由。
写在最后
- 文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞和关注😊
- 本文首发于掘金,未经许可禁止转载💌
这篇关于Vue实现文件中的的实例访问??的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南