vue项目中如何直接使用this.xxx调用组件,不用import组件
前提:最近开发了一个导出文件的公共组件,但组内的小伙伴觉得好麻烦,每次都需要import该组件,然后在html模块中写组件的标签,传参等等,觉得好麻烦,希望可以像element UI中的【message】一样,直接 【this.$message({type:"success",text:"成功"})】就可以展示出组件,所以就打算改造一下,方便使用。
1. import组件使用的方式如下:
首先开发了一个【commonExport.vue】,然后在业务中使用。
好了,前面说了我们比较常用的使用组件方式,但有点小麻烦,需要写组件标签等等,所以下面对他进行调整,直接绑在vue上作为一个方法去调用。
2.this.$export方法调用的方式使用的方式如下:
(1)首先创建了一个【instance.js】文件
// instance.js import commonExport from './index.vue' import { omit } from "lodash-es" const Export = {}; let instance = null; Export.install = Vue => { Vue.prototype.$export = (options = {}) => { let propsKeys = ["dataType", "selectLength", "total", "exportApi"]; let props = {}; propsKeys.forEach(key => { props[key] = options[key] }) const ExportConstructor = Vue.extend({ render(h) { return h(commonExport, { props: props, attrs: { ...(omit(options, propsKeys)), visible: true }, on: { 'close'() { document.body.removeChild(instance.$el) instance.$destroy(); instance = null; } } }) } }) if (instance) { instance.$destroy(); instance = null; } instance = new ExportConstructor() instance.$mount(document.createElement('div')) document.body.appendChild(instance.$el) } } export default Export
(2)在main.js中使用Vue.ues()全局使用该插件
import $export from "./commonComponents/commonExport/instance.js"
Vue.use($export)
(3)调用
(4)效果与引用组件的效果一样一样的
标签:
vue
, this.方法调用组件
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」