有时候懒的把一些通用组件写到​​template​​里面去,而业务中又需要用到,比如表示​​loading​​状态这样组件。

如果是这样的组件,可以选择把组件手动初始化,让组件在整个app生命周期中始终保持活跃。

如:


// a.js
import Vue from 'vue'

import hello from './hello.vue'


const wrapInstance = new Vue({
render(h) {
return h(hello, {})
}
})

const wrap = wrapInstance.$mount() // 渲染成DOM
document.body.appendChild(wrap.$el) // 把DOM插入节点
const helloInstance = wrapInstance.$children[0] // 拿到的是当前的vue实例,hello实例是当前的子组件
export default helloInstance

// main.js
import helloInstance from 'a.js'
Vue.prototype.$someName = helloInstance


实例化一个vue组件,挂在到原型链 或者 项目root vue实例上,就可以通过函数式的调用组件的方法。在APP生命周期内可以永不摧毁,方便调用。

类似​​Element​​组件库的loading组件 或者 ​​message​​组件。

​this.$message.error('错了哦,这是一条错误消息')​​通过函数就可以调用​​Message​​组件方法。

​在线实例​

​element文档地址​

如果是一些全局性的组件,或者顶层组件,就可以考虑在生命周期永久实例化,绑定在VUE的原型上,方便开发的时候调用。