Vue 组件
注册
Components 要确保在初始化根实例 之前 注册了组件
全局注册：
代码语言：javascript复制Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
el: '#example'
})局部注册：
代码语言：javascript复制var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
el: '#example',
components: {
'my-component': Child
}
})其他
is属性：
把自定义组件绑定在此元素上
代码语言：javascript复制<table>
<tr is="my-row"></tr>
</table>data
在组件中必须是函数形式
代码语言：javascript复制// ES5
data:function(){}
// ES6
data () {}构成组件
props down, events up
Prop验证
代码语言：javascript复制Vue.component('example', {
props: {
// 基础类型检测 （`null` 意思是任何类型都可以）
propA: Number,
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数字，有默认值
propD: {
type: Number,
default: 100
},
// 数组／对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
})自定义事件
侦听子组件抛出的事件，必须用v-on在模板中绑定
绑定原生事件
代码语言：javascript复制v-on:click.native子组件索引：ref
代码语言：javascript复制<div id="parent">
<user-profile ref="profile"></user-profile>
</div>
<script>
var parent = new Vue({ el: '#parent' })
var child = parent.$refs.profile
</script>
和v-for一起用时，ref是个数组或对象Slot
Slot 具名Slot 作用域插槽
动态组件 keep-alive
Vue 组件的 API 来自三部分： Props 允许外部环境传递数据给组件 Events 允许组件触发外部环境的副作用 Slots 允许外部环境将额外的内容组合在组件中
