在vue中禀综，我們使用組件的方式，一般是寫一個.vue文件定枷，然后通過import引入欠窒，通過components注冊來使用使用。
還有一種方式岖妄，是我們在使用第三方ui組件的時候(比如elementui)，是直接在main.js文件中七兜，通過Vue.use()來注冊福扬。這種方式注冊的組件我們就叫做全局組件。
那我們自己如何定義全局組件呢狠裹？
第一步汽烦，我們先寫一個組件：
// test.vue 文件
<template>
<div>
this is test
</div>
</template>
<script>
export default {
name: 'test'
}
</script>
第二步，我們注冊這個組件：
在test.vue同級目錄建一個index.js文件
import test from './test.vue'
export default (Vue) => {
Vue.component(test.name, test)
}
第三步碗暗，把組件注冊到全局：
在main.js文件中梢夯，加入兩行代碼
import test from './components/test'
Vue.use(test)
這樣我們就可以在任何地方直接使用test這個組件晴圾。（是不是很簡單）
在第三方ui組件中，一般還有一種特殊的組件死姚，我們是通過api來調(diào)用的，比如element的message組件色罚。
那么如何通過api來調(diào)用組件呢账劲？(我們來做一個最簡單的message組件)
第一步金抡，同樣的也是先寫一個組件：
這個組件也很簡單腌且，一個div铺董，里面有個span顯示內(nèi)容巫击，需要的參數(shù)是content精续。為什么有個style的計算屬性呢？
這是因為重付，我們在寫組件的時候，一般會寫一個簡單一點的通用性組件愕把，只放基本的內(nèi)容森爽，然后通過組件的繼承來擴(kuò)展它的功能，這樣可以增加組件的靈活性橘蜜。
新建一個notify.js文件
// notify.js文件
<template>
<transition name="fade">
<div class="notification"
:style="style"
>
<span class="content">{{content}}</span>
</div>
</transition>
</template>
<script>
export default {
name: 'notify',
props: {
content: {
type: String,
required: true
}
},
computed: {
style() {
return {
}
}
}
}
</script>
<style lang="stylus" scoped>
.notification
display: inline-flex
background-color #303030
color rgba(255, 255, 255, 1)
align-items center
padding 20px
min-width 280px
box-shadow 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)
flex-wrap wrap
transition all .3s
.content
padding 0
.btn
color #ff4081
padding-left 24px
margin-left auto
cursor pointer
.fade-enter-active, .fade-leave-active
transition opacity .5s
.fade-enter, .fade-leave-to
opacity 0
</style>
第二步：擴(kuò)展基礎(chǔ)組件
新建一個fun-notify.js文件
為了方便计福，這路的擴(kuò)展是寫死的徽职，但是實際項目中，肯定是會有很多需要擴(kuò)展的屬性和方法姆钉。（比如組件自動隱藏方法，這些直接在基礎(chǔ)組件里面寫死肯定是不合理的）
import notify from './notify'
export default {
extends: notify,
computed: {
style () {
return {
position: 'fixed',
right: '20px',
bottom: `20px`
}
}
}
}
第三步：寫一個掛載組件的方法
通過api來調(diào)用組件陶冷，那么我們肯定要寫一個全局方法毯辅，來動態(tài)的掛載組件。
新建一個function.js文件
方法也很簡單沾谜，先把用戶傳過來的參數(shù)，傳給props媚媒，然后把組件實例通過$mount()進(jìn)行掛載涩僻。
import Vue from 'vue'
import Component from './fun-notify'
const NotificationConstructor = Vue.extend(Component)
const notifyMessage = (options) => {
const instance = new NotificationConstructor({
propsData: {
...options
}
})
instance.vm = instance.$mount()
document.body.appendChild(instance.vm.$el)
}
export default notifyMessage
第四步：把方法和組件注冊到全局
新建一個index.js文件
import notify from './notify.vue'
import notifyMessage from './function'
export default (Vue) => {
Vue.component(notify.name, notify),
Vue.prototype.$notifyMessage = notifyMessage
}
然后在main.js文件中加入兩行代碼
import notify from './components/notify'
Vue.use(notify)
第五步：調(diào)用
this.$notifyMessage({
content: 'this is test'
})
message提示組件成功顯示逆日。
從上面的message例子可以看出來，現(xiàn)在這個message組件是及其簡陋的室抽，而且還有很多功能沒有實現(xiàn)。比如自動消失晓折，多個message自動計算高度兽泄，dom自動刪除等。由于篇幅原因胃珍，這里就不詳細(xì)說明了蜓陌。
大家有興趣的話，可以看demo钮热。
