基于elementui二次开发全局组件,通过函数方式调用组件,带详细说明

文件结构如下,新建一个文件夹放置组件和js文件

基于elementui二次开发全局组件,通过函数方式调用组件,带详细说明_第1张图片

在index.vue文件中写组件,代码如下。本次二次封装的elementui的el-dialog。




在index.js文件中写如下。注意看注释说明

import Vue from 'vue'
import Tip from './index.vue'

const EditionTipConstructor =  Vue.extend(Tip)//通过Vue下的extend方法可以得到组件构造函数//Tip是引入进来的组件对象
           
export  function EditionTip(options) {//通过函数创建组件
  const EditionTipcom = new EditionTipConstructor({data: options}).$mount()   //new EditionTipConstructor的结果得到vue组件对象 //xx.$mount() 放置渲染出来的dom,并将dom挂载到属性上
   document.body.appendChild(EditionTipcom.$el)//EditionTipcom是个组件对象,EditionTip.$el是组件对象渲染出来的dom
}
   

 最后在main.js中配置

import {EditionTip} from '@/views/editionTip/index.js'
Vue.prototype.$EditionTip = EditionTip;//挂载到vue实例上,可以全局使用了

页面中直接使用就行,我将其写在了mounted中

    mounted() {
        this.$EditionTip({
            title: '重要提示',
            content: '请广大居民用户积极自主下楼做核酸'
        })
    }

学习资源:【前端哈默】如何用函数调用方式创建组件【Vue小知识】_哔哩哔哩_bilibili

你可能感兴趣的:(javascript,vue,vue.js,前端)