然后深入了解vue組件中的prop、slot和event

本篇文章為大家展示了然后深入了解vue組件中的prop、slot和event，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

不管多么復雜的組件，一定是由屬性prop、事件event和插槽slot組成的。

問題引入

是否遇到以下這種場景：開發中，遇到一些特別常見的展示或功能，想抽離并封裝成一個獨立組件，然后共享給其他開發人員使用。

要想封裝一個組件，我們先了解組件的基本組成，不管多么復雜的組件，一定是由屬性prop、事件event和插槽slot組成的。編寫組件的過程就是設計這三個API的過程。同樣如果想閱讀別人編寫的組件，也可以通過這三個API去快速理解。

那么這三個API：prop、event、slot，我們該怎么寫呢？

屬性prop

prop是用來定義該組件可接受哪些屬性。

閱讀vue官網，我們知道prop可以使用數組或對象的寫法。很多人為了方便，直接使用prop的數組寫法，這是不嚴謹的，在寫通用組件時，我們要盡可能使用prop的對象寫法。

大家可以看以下代碼：

app.component('my-component', {
  props: {
    // 基礎的類型檢查 (`null` 和 `undefined` 會通過任何類型驗證)
    propA: Number,
    // 多個可能的類型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 帶有默認值的數字
    propD: {
      type: Number,
      default: 100
    },
    // 帶有默認值的對象
    propE: {
      type: Object,
      // 對象或數組默認值必須從一個工廠函數獲取
      default() {
        return { message: 'hello' }
      }
    },
    // 自定義驗證函數
    propF: {
      validator(value) {
        // 這個值必須匹配下列字符串中的一個
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // 具有默認值的函數
    propG: {
      type: Function,
      // 與對象或數組默認值不同，這不是一個工廠函數 —— 這是一個用作默認值的函數
      default() {
        return 'Default function'
      }
    }
  }
})

相信大家都可以看出來，prop使用對象的寫法，我們可以驗證傳入進來的屬性是否正確，可以及時給予提示，這在我們寫獨立組件時特別有用。

由于vue要遵循單向數據流原則，我們不要嘗試去修改prop值，需采用其他方案。

修改prop值常見方案

1、prop傳遞初始值，賦值給data

props: ['initialCounter'],
data() {
  return {
    counter: this.initialCounter
  }
}

2、通過計算屬性來接收prop值

props: ['size'],
computed: {
  normalizedSize() {
    return this.size.trim().toLowerCase()
  }
}

插槽slot

插槽slot是用來分發組件的內容，如

<todo-button>
  Add todo
</todo-button>

<!-- todo-button 組件模板 -->
<button class="btn-primary">
  <slot></slot>
</button>

當渲染時，會被替換成Add todo，如

<!-- 渲染 HTML -->
<button class="btn-primary">
  Add todo
</button>

這是slot的最基礎用法，衍生而來的有具名插槽，顧名思義就是給區分插槽，可以設置多個插槽，如

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

有時會遇到給插槽設置備用信息，那么可以這樣使用：

<button type="submit">
  <slot>Submit</slot>
</button>

插槽的備用信息就是Submit

事件event

事件名

當子組件的數據有修改，想通知父組件時，可以使用事件event，如下：

// 子組件
this.$emit('myEvent')

// 父組件
<my-component @my-event="doSomething"></my-component>

可以看出，子組件調用時，事件名是駝峰，而父組件的事件名則是kebab-case命名。

自定義事件

可以通過emits選項來自定義事件，如

app.component('custom-form', {
  emits: ['inFocus', 'submit']
})

需要注意的是，如果自定義事件和原生事件相同，比如click，那么自定義事件會代替原生事件

組件的組織

引入官網的一張圖來

一個頁面相當于一個由組件組成的樹，每個組件都可能有父組件和子組件，通過屬性prop可讓父組件傳遞屬性到子組件，通過事件event可讓子組件傳遞信息到父組件，而插槽slot則是父組件用來分發內容。

除了這三個API，組件還有其他內容，比如生命周期，混入，計算屬性等等，但是針對組件開發來說，這三個API已足夠了。掌握了這三個API，剩下的就是解耦組件的交互邏輯，盡量分發不同的功能到不同的子組件里，然后建立組件樹。

上述內容就是然后深入了解vue組件中的prop、slot和event，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。