详解Vue全局组件的挂载之实现弹窗组件

目录

• vue组件挂载类型
• 组件挂载代码示例
• 1.vue.extend()方法
• 2.render函数挂载

vue组件挂载类型

vue中组件的挂载分为两种类型：

vue.extend()

render函数

组件挂载代码示例

1.vue.extend()方法

此处实现一个弹窗组件，包含确定取消按钮

msgBox.vue文件：（此处样式可自行修改）

msgBox.js文件：

// 导入msgBox的vue文件
import msgBox from './msgBox'

const msgBox = {
  install: function(Vue) {
    // 组件注册
    const Msg = Vue.extend(msgBox)
    const msg = new Msg()

    // 挂载
    // 此处展示了两个盒子，是因为vue.extend方法挂载会覆盖原有的dom元素，销毁后便无法再次挂载
    document.body.innerHTML += '
'
    msg.$mount('#msg')
    // 全局注册
    Vue.prototype.$msgBoxInfo = function(options) {
    // 打开弹窗触发的方法
      msg.open(options)
      // 弹窗关闭后销毁组件
      msg.remove = function() {
        const msgDom = document.getElementById('msg')
        document.body.removeChild(msgDom)
        msg.$destroy()
      }
      return msg
    }
  }
}
export default msgBox

main.js文件内引入使用：

// 此处根据实际路径引入
import msgBoxfrom './msgBox'
Vue.use(msgBox)

调用方式：

this.$msgBoxInfo({
          msgTip: '这是新的msgbox',
          success: () => {
            alert('成功状态的msgbox')
          },
          cancle:() => {
            alert('取消状态的msgbox')
          }
        })

vue.extend()中的data是一个函数并且返回一个对象；且会覆盖被挂载的dom元素；

同时也需要注意install方法能够开发新的插件并且注册全局组件。并且用install注册的组件，在main.js文件内引用的时候，需要使用Vue.use()进行全局声明。

2.render函数挂载

notice.vue文件(此处弹窗比较粗糙，样式自行修改)

notice.js文件

import Vue from 'vue'
function notice(Component, props) {
  const vm = new Vue({
    render: h => h(Component, { props })
  }).$mount()
  document.body.appendChild(vm.$el)
  const comp = vm.$children[0]
  // 需要对挂载的组件进行删除
  comp.remove = function() {
    document.body.removeChild(vm.$el)
    vm.$destroy()
  }
  return comp
}
export default notice

main.js文件引入：

import create from './notice'
Vue.prototype.$create = create

方法调用：

import Notice from '../Notice'
// 此处的notice组件需要引入
this.$create(Notice, {
            title: '自己封装弹窗',
            message: '你好，这是自己写的弹窗',
            duration: 1000
          }).show()

render函数作用：是vue通过js渲染dom结构的函数createElement，可以简写为h；这个函数会生成一个虚拟dom节点，render函数得到这个dom节点函数之后，返回给mount函数，渲染为真实的dom节点，并挂载到根节点上。

以上就是详解Vue全局组件的挂载之实现弹窗组件的详细内容，更多关于Vue组件挂载 弹窗的资料请关注脚本之家其它相关文章！