首頁 > web前端 > Vue.js > 主體

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

青灯夜游
發布: 2021-11-23 19:14:06
轉載
2285 人瀏覽過

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

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

問題引入

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

要想封裝一個元件,我們先了解元件的基本組成,不管多麼複雜的元件,一定是由屬性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(&#39;myEvent&#39;)
登入後複製
// 父组件
<my-component @my-event="doSomething"></my-component>
登入後複製

可以看出,子元件呼叫時,事件名稱是駝峰,而父元件的事件名稱則是kebab-case命名。

自訂事件

可以透過emits選項來自訂事件,如

app.component(&#39;custom-form&#39;, {
  emits: [&#39;inFocus&#39;, &#39;submit&#39;]
})
登入後複製

需要注意的是,如果自訂事件和原生事件相同,例如click,那麼自訂事件會取代原生事件

元件的組織

引入官網的一張圖來

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

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

總結

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

更多程式相關知識,請造訪:程式設計入門! !

以上是深入了解vue元件中的三個API:prop、slot和event的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板