Vue組件
組件是可復(fù)用的 Vue 實(shí)例，相當(dāng)于公用方法，與
new Vue接收相同的選項(xiàng)橘洞，例如data、computed说搅、watch炸枣、methods以及生命周期鉤子等。僅有的例外是像el這樣根實(shí)例特有的選項(xiàng)
基本示例
// 注冊(cè)組件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
// html
<div id="components-demo">
<button-counter></button-counter>
</div>
// 組件使用
new Vue({ el: '#components-demo' })
// 組件復(fù)用
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
- data選項(xiàng)必須是一個(gè)函數(shù)，每次點(diǎn)擊都會(huì)創(chuàng)建一個(gè)新的實(shí)例适肠，每個(gè)實(shí)例中data數(shù)據(jù)都是獨(dú)立的
通過(guò) Prop 向子組件傳遞數(shù)據(jù)
通過(guò)事件向父級(jí)組件發(fā)送消息
通過(guò)插槽分發(fā)內(nèi)容
通過(guò)slot向一個(gè)組件傳遞內(nèi)容
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
多個(gè)插槽時(shí)候使用劇名插槽,
// 命名slot
<slot name="header"></slot>
// 使用名為header的slot
<template slot="header">
<h1>Here might be a page title</h1>
</template>
父組件模板的所有東西都會(huì)在父級(jí)作用域內(nèi)編譯霍衫；子組件模板的所有東西都會(huì)在子級(jí)作用域內(nèi)編譯。
動(dòng)態(tài)組件 & 異步組件
動(dòng)態(tài)組件
- 通過(guò) Vue 的 <component> 元素加一個(gè)特殊的 is 特性來(lái)實(shí)現(xiàn)動(dòng)態(tài)組件
<component v-bind:is="currentTabComponent"></component>在線鏈接 - 使用keep-alive保持組件的現(xiàn)有狀態(tài)侯养，不會(huì)因?yàn)榍袚Q導(dǎo)致組件重新渲染敦跌。
<keep-alive> 要求被切換到的組件都有自己的名字，不論是通過(guò)組件的 name 選項(xiàng)還是局部/全局注冊(cè)
異步組件
為了簡(jiǎn)化逛揩，Vue 允許你以一個(gè)工廠函數(shù)的方式定義你的組件柠傍，這個(gè)工廠函數(shù)會(huì)異步解析你的組件定義。Vue 只有在這個(gè)組件需要被渲染的時(shí)候才會(huì)觸發(fā)該工廠函數(shù)辩稽，且會(huì)把結(jié)果緩存起來(lái)供未來(lái)重渲染
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
// 向 `resolve` 回調(diào)傳遞組件定義
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})
處理加載狀態(tài)
const AsyncComponent = () => ({
// 需要加載的組件 (應(yīng)該是一個(gè) `Promise` 對(duì)象)
component: import('./MyComponent.vue'),
// 異步組件加載時(shí)使用的組件
loading: LoadingComponent,
// 加載失敗時(shí)使用的組件
error: ErrorComponent,
// 展示加載時(shí)組件的延時(shí)時(shí)間惧笛。默認(rèn)值是 200 (毫秒)
delay: 200,
// 如果提供了超時(shí)時(shí)間且組件加載也超時(shí)了，
// 則使用加載失敗時(shí)使用的組件逞泄。默認(rèn)值是：`Infinity`
timeout: 3000
})
