1. 爲什麼一個 new Vue 可以構造出一個 eventBus
// 當我們定義了new Vue之後,可以這樣用
var app = new Vue({
created(){
this.$emit()
this.$on()
}
})
// 也可以這樣用
app.$emit()
app.$on()
app.$off()
// 那麼歸根結底,只要滿足能觸發一個事件,監聽一個事件,和取消監聽一個事件,那麼它就是一個事件中心
eventBus
eventBus.$emit() // 觸發一個事件
eventBus.$on() // 監聽一個事件
eventBus.$off() // 取消監聽一個事件
// 而我們的app 正好全部滿足,而app就是 new Vue,new Vue就有這三個接口,所以new Vue就是一個eventHub。
// 因爲它正好有這個三個接口,它的行爲完全一樣,這就叫基於行爲的開發
2. 開始寫 CSS 樣式
<!-- tabs-head.vue -->
<style lang="scss" scoped>
$tab-height: 40px;
.tabs-head {
display: flex;
height: $tab-height;
justify-content: flex-start;
align-items: center;
border: 1px solid red;
> .actions-wrapper {
margin-left: auto; // 這樣寫可以讓按鈕靠右,不要問爲什麼就是可以
}
}
</style>
<!-- tabs-item.vue -->
<style lang="scss" scoped>
.tabs-item {
flex-shrink: 0;
padding: 0 2em; // 用em是因爲只關心兩個欄之間的間距
}
</style>
3.激活屬性 active 應該放在 data,還是放在 props
如果需要用戶傳值,就放到 props 裏面,因爲 props 是你的輸入參數,
data 不需要用戶傳值,自身維護值
// 抽象的講,就像寫一個函數,prop是外部傳遞的參數,data相當於局部變量,組件就是一個函數
function fn(prop1,prop2){
var data1
var data2
}
// 我們在設計api的時候,沒有需要用戶傳遞data,我們是讓用戶把name傳進來,實際上是tabs傳遞來的
// tabs傳也是傳,硬要用props也可以
4.在 mounted 裏測試開送事件,不能用 created,因爲需要確認元素已經掛載好了
// app.js的new Vue
data: {
selectedTab: 'sports'
}
// index.html
<g-tabs :selected.sync="selectedTab" @update:selected="yyy">
<g-tabs-head>
<g-tabs-item name="woman">
<g-icon name="setting"></g-icon>美女
</g-tabs-item>
</g-tabs-head>
</g-tabs>
// tabs.vue發佈
mounted(){
this.eventBus.$emit('update:selected', this.selected) // 這樣寫不可以觸發外面
}
// tabs-item監聽
created(){
this.eventBus.$on('update:selected',(name)=>{
if(name === this.name){
console.log(`我${this.name}被選中了`)
}else{
console.log(`我${this.name}沒被選中了`)
}
})
},
// tabs-pane同理,選中了就把自己變成active
5. 加 class 寫成計算屬性
// tabs-item.vue
<div class="tabs-item" @click="xxx" :class="classes"></div>
computed: {
classes() { // classes是一個計算屬性
return {
active: this.active
}
}
},
created() {
this.eventBus.$on('update:selected', (name) => {
this.active = name === this.name;
})
},
// tabs-pane,同理,但是要多加一個v-if="active" 用於控制切換隱藏
<div class="tabs-pane" :class="classes" v-if="active">
<slot></slot>
</div>
6. 組件不能改自己的 props
// 相當於
function fn(obj){
obj.a = '1'
return obj
}
// 沒多大問題,但是我們一般不要改參數傳來的東西,vue也一樣,如果硬要改
function fn(obj,n){
obj.a = '1'
n = 2
var number = n
number = 2
return obj
}
7. 框架主要的目的
// 使得團隊的傻逼也寫不出垃圾代碼以保證代碼的平均質量
function fn(obj){
obj.a = '1' // bad
return obj
}
function fn(obj,n){
obj.a = '1'
n = 2
var number = n // good
number = 2
return obj
}
最後:個人微信,歡迎交流!