快捷導航

vue-extend和vue-component注冊一個全局組件方式

更新時間：2023年11月09日 10:08:56 作者：donggua_123

這篇文章主要介紹了vue-extend和vue-component注冊一個全局組件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

1.在components文件夾下新建alert文件夾

里面首先新建一個alert.vue文件

<!-- alert -->
<template>
    <div class="alert" v-show="showAlert">
        <p class="msg">{{ msg }}</p>
    </div>
</template>
 
<script>
export default {
    props: {
        msg: {
            type: String,
            default: ''
        },
        showAlert: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {};
    },
    //方法集合
    methods: {}
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css類
.alert {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    .msg {
        text-align: center;
        font-size: 20px;
        padding: 5px 10px;
    }
}
</style>

2.然后在alert文件下再新建一個alert.js文件

寫擴展插件的js

import Alert from "./alert.vue";
const ALERT = {
    install(Vue) {
        Vue.component('alert', Alert); // 一定先注冊
 
        Vue.prototype.$alert = (text) => {
            let VueAlert = Vue.extend({
                data() {
                    return {
                        msg: '',
                        showAlert: false
                    }
                },
                render(h) {
                    let props = {
                        msg: this.msg,
                        showAlert: this.showAlert,
                    }
                    return h('alert', {
                        props
                    })
                }
            });
            let newAlert = new VueAlert();
            let vm = newAlert.$mount();
            let el = vm.$el;
            document.body.appendChild(el); // 添加到頁面中
            vm.showAlert = true;
            vm.msg = text;
        }
    }
}
export default ALERT;

3.在main.js中引入

、、、、
import diyAlert from '@/components/alert/alert'; // extentd寫alert
、、、
Vue.use(diyAlert);

4.這樣就可以在全局調(diào)用了

<!-- extend寫message -->
<template>
    <div class="extentd">
         <el-button type="primary" @click="alert">alert</el-button>
    </div>
</template>
 
<script>
export default {
    data() {
        return {};
    },
    //方法集合
    methods: {
        alert() {
            this.$alert('hahahah');
        }
    }
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css類
</style>