vue 手动挂载$mount报错？ 学习element ui做一个自定义的动态组件

Question

看了element ui的源码想学习其思路做一个自定义的动态组件，具体操作如下：

创建一个main.vue文件：

再创建一个main.js

import Vue from 'vue';

let AlertConstructor = Vue.extend(require('./main.vue'));

let instance;

var Alert= function (msg) {

    instance = new AlertConstructor({

        data: {

            message: msg

        }

    });

    instance.$mount();

    document.body.appendChild(instance.$el);

    return instance;

};

export default Alert;

在主入口main.js引入组件：

import Alertfrom './alert/src/main.js';

Vue.prototype.$myAlert = Alert;

然后在页面上测试一下：

<button @click='test'>按钮</button>

methods:{

    test(){

        this.$myAlert("hello vue");

    }

}

此时控制台报错：

[Vue warn]: Failed to mount component: template or render function not defined.

百思不得其解？？？

Answer 1

注册组件 还得掉一个vue的 install 内置方法//alert里面的main.jsimport Vue from 'vue'import alertComponent from './main.vue'let AlertConstructor = Vue.extend(alertComponent);let instance;var Alert= function (msg) {&nbsp; &nbsp; instance = new AlertConstructor({&nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; message: msg&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; instance.$mount();&nbsp; &nbsp; document.body.appendChild(instance.$el);&nbsp; &nbsp; // return instance;&nbsp; //不需要return了&nbsp; 你都声明全局变量了};const install = function(Vue) {&nbsp; //必须要使用这个方法挂载到vue上&nbsp; &nbsp; Vue.prototype.$myAlert = Alert;}export default install// export default Alert;//主入口main.js这么引用import Alertfrom from './alert/src/main.js';Vue.use(Alertfrom)；然后就可以在别的组件里通过 this.$myAlert()调用了这里面有比较完整的示例代码，你可以看看