深入了解vue元件中的三個API：prop、slot和event

不管多麼複雜的元件，一定是由屬性prop、事件event和插槽slot組成的。以下這篇文章就來帶大家來了解vue元件中prop、slot和event，看看這三個API該怎麼寫，希望對大家有幫助！

問題引入

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

要想封裝一個元件，我們先了解元件的基本組成，不管多麼複雜的元件，一定是由屬性prop、事件event和插槽slot組成的。寫組件的過程就是設計這三個API的過程。同樣如果想閱讀別人寫的元件，也可以透過這三個API去快速理解。 【相關推薦：《vue.js教學》】

那麼這三個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元件中的三個API：prop、slot和event的詳細內容。更多資訊請關注PHP中文網其他相關文章！