H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

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

创建一个main.vue文件:

<template>
    <div v-show="visible">{{message}}</div>
</template>

<script>
    export default{
        data(){
            return{
                message:'',
                visible:true
            }
        },
        methods:{
            close(){
                setTimeout(()=>{
                    this.visible = false;
                },2000)
            },
        },
        mounted() {
            this.close();
        }
    }
</script>

再创建一个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.

百思不得其解???

回答:

注册组件 还得掉一个vue的 install 内置方法

//alert里面的main.js
import Vue from 'vue'
import alertComponent from './main.vue'
let AlertConstructor = Vue.extend(alertComponent);
let instance;
var Alert= function (msg) {
    instance = new AlertConstructor({
        data: {
            message: msg
        }
    });
    instance.$mount();
    document.body.appendChild(instance.$el);
    // return instance;  //不需要return了  你都声明全局变量了
};

const install = function(Vue) {  //必须要使用这个方法挂载到vue上
    Vue.prototype.$myAlert = Alert;
}
export default install
// export default Alert;
//主入口main.js这么引用
import Alertfrom from './alert/src/main.js';
Vue.use(Alertfrom);

然后就可以在别的组件里通过 this.$myAlert()调用了
这里面有比较完整的示例代码,你可以看看

本文地址:H5W3 » vue 手动挂载$mount报错? 学习element ui做一个自定义的动态组件

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址