不管多麼複雜的元件，一定是由屬性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中文網其他相關文章！
