vue-extend和vue-component注册一个全局组件方式
作者：donggua_123
这篇文章主要介绍了vue-extend和vue-component注册一个全局组件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
extend()是一个全局构造器，生成的是一个还没挂载到页面元素上的组件实例。
在全局挂载插件的形式全局注册，就需要用到vue.use（）方法，官方文档：
所以插件必须是一个对象，并且提供install方法，注册的时候自动调用该方法。
所以组件的写作步骤就清晰了一些了，实践出真知，现在就来练习一下写一个简约版的全局alert弹框
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.这样就可以在全局调用了
<!-- 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>
剩下的就是在此基础上进行功能性扩展了，比如关闭，动效等，就简单了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。