不管多麼複雜的元件,一定是由屬性prop、事件event和插槽slot組成的。以下這篇文章就來帶大家來了解vue元件中prop、slot和event,看看這三個API該怎麼寫,希望對大家有幫助!
是否遇到以下這種場景:開發中,遇到一些特別常見的展示或功能,想抽離並封裝成一個獨立組件,然後共享給其他開發人員使用。
要想封裝一個元件,我們先了解元件的基本組成,不管多麼複雜的元件,一定是由屬性prop、事件event和插槽slot組成的。寫組件的過程就是設計這三個API的過程。同樣如果想閱讀別人寫的元件,也可以透過這三個API去快速理解。 【相關推薦:《vue.js教學》】
那麼這三個API:prop、event、slot,我們該怎麼寫呢?
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值,需採用其他方案。
1、prop傳遞初始值,賦值給data
props: ['initialCounter'], data() { return { counter: this.initialCounter } }
2、透過計算屬性來接收prop值
props: ['size'], computed: { normalizedSize() { return this.size.trim().toLowerCase() } }
插槽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,如下:
// 子组件 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中文網其他相關文章!