1：先來(lái)回顧一下vue組件的局部注冊(cè)與全局注冊(cè)
image
然后在另外一個(gè)組件HelloWorld.vue內(nèi)進(jìn)行局部注冊(cè)芹橡；
image
我們也可以再main.js里進(jìn)行全局注冊(cè)毒坛；
image
2 : 使用Vue.use()
我們?cè)陂_(kāi)發(fā)過(guò)程中遇到大量需要反復(fù)使用的組件時(shí)都會(huì)進(jìn)行全局注冊(cè)，那么如何elementui一樣Vue.use()來(lái)注冊(cè)組件，請(qǐng)回顧 文檔 對(duì)插件的擴(kuò)展 或者戳 這里
我們建立一個(gè)文件夾存放組件煎殷，寫(xiě)一個(gè)aler組件
image
然后在 index.js里配置下這個(gè)組件的install
image
這樣的話就可以在main.js 里面
import zkxAlert from '../componentLib/alert '
Vue.use(zkxAlert)
如何像elementui 一樣 use(elementui) 就可以使用全部組件
image
在componentLib/index.js 內(nèi)如上處理
3:使用 prop, 事件, slot 讓組件變得靈活;
<template>
<!--可以再這個(gè)地方添加動(dòng)畫(huà)效果-->
<transition>
<div v-show="visible" class="z-alert" :class="typeClass">
{{title}}
<slot></slot>
<span class="z-alert-close" v-show="closable" @click="close()">關(guān)閉</span>
</div>
</transition>
</template>
<script>
export default{
name:'zkxAlert',
props:{
//一個(gè)alert 組件 最基本的要有 標(biāo)題 不同類(lèi)型的提示 關(guān)閉事件
title:{
type: String,
default: '',
required: true
},
//type 會(huì)有 success warning error 三種類(lèi)型
type: {
type: String,
default: 'success'
},
//是否可以點(diǎn)擊關(guān)閉 默認(rèn)可以
closable: {
type: Boolean,
default: true
},
},
data() {
return {
visible: true
};
},
methods: {
close() {
this.visible = false;
}
},
computed:{
//通過(guò)調(diào)用的type 來(lái)計(jì)算需要顯示的class
typeClass(){
return `z-alert--${this.type}`;
}
}
}
</script>
<style scoped="scoped">
.z-alert{
width:1000px;
/*height: 50px;*/
line-height: 50px;
margin: auto;
}
.z-alert-close{
float:right;
line-height: 50px;
}
.z-alert--success{
background: #f0f9eb;
color:cadetblue;
}
.z-alert--warning{
background: #fdf6ec;
color:#e6a28b;
}
.z-alert--error{
background: #fef0f0;
color:#f681b0;
}
</style>
下面我們use組件之后屯伞，調(diào)用看下
<zkxAlert title="小豬佩奇身上紋" :closable='false'></zkxAlert>
<zkxAlert title="掌聲送給社會(huì)人" :closable='false' type='error'></zkxAlert>
<zkxAlert title="馬上下班" type='warning'>周末愉快</zkxAlert>
image
