Vue造輪子-tab組件(下)

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. 框架主要的目的

// 使得團隊的sb也寫不出垃圾代碼以保證代碼的平均質量
    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
    }

複製代碼

最後:我的微信，歡迎交流!