Vue组件
组件是可复用的 Vue 实例，相当于公用方法，与
new Vue接收相同的选项，例如data、computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项
基本示例
// 注册组件
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' })
// 组件复用
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
- data选项必须是一个函数，每次点击都会创建一个新的实例，每个实例中data数据都是独立的
通过 Prop 向子组件传递数据
通过事件向父级组件发送消息
通过插槽分发内容
通过slot向一个组件传递内容
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
多个插槽时候使用剧名插槽,
// 命名slot
<slot name="header"></slot>
// 使用名为header的slot
<template slot="header">
<h1>Here might be a page title</h1>
</template>
父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
动态组件 & 异步组件
动态组件
- 通过 Vue 的 <component> 元素加一个特殊的 is 特性来实现动态组件
<component v-bind:is="currentTabComponent"></component>在线链接 - 使用keep-alive保持组件的现有状态，不会因为切换导致组件重新渲染。
<keep-alive> 要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册
异步组件
为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
// 向 `resolve` 回调传递组件定义
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})
处理加载状态
const AsyncComponent = () => ({
// 需要加载的组件 (应该是一个 `Promise` 对象)
component: import('./MyComponent.vue'),
// 异步组件加载时使用的组件
loading: LoadingComponent,
// 加载失败时使用的组件
error: ErrorComponent,
// 展示加载时组件的延时时间。默认值是 200 (毫秒)
delay: 200,
// 如果提供了超时时间且组件加载也超时了，
// 则使用加载失败时使用的组件。默认值是：`Infinity`
timeout: 3000
})
