Vue动态创建全局组件

创建全局组件

创建功能组件HelloWorld.vue，组件功能很简单，就是类似弹出框的功能

<template>
  <div class="hello">
    <h1 v-if="isShow">{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      isShow: false
    }
  }
}
</script>

创建HelloWorld_com.js

引入Vue与功能组件

import Vue from 'vue'
import Hellow from './HelloWorld.vue'

生成构造器

const HellowConstructor = Vue.extend(Hellow)

封装

function showHello( _t, _time = 2000) {
    let _dom = new HellowConstructor({
        el: document.createElement('div'), // 生成DOM节点
        data() {
            return {
                msg: _t, // 创建的功能组件中的msg
                isShow: true // 创建的功能组件中的isShow，控制显隐式
            }
        }
    })

    document.body.appendChild(_dom.$el) // 将创建的DOM挂载到body

    setTimeout(() => { _dom.isShow = false }, _time) // 设置显隐式时间
}

全局组件，挂载到Vue的原型，并导出

function helloReg() {
    Vue.prototype.$showHello = showHello
}

export default helloReg

在main.js中引入并全局使用

import showHellow from './components/HelloWorld_com/HelloWorld_com'

Vue.use(showHellow)

使用全局组件

我是在app中直接使用 (因为已经绑在Vue原型上了，所以直接this.$XXX传入需要的参数使用)

<template>
  <div id="app">
    <button @click="showHello">点击</button>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    showHello() {
      this.$showHello('hello,', 5000)
    }
  }
}
</script>

效果图