前言：这一篇是关于组件基础、组件注册、Prop等内容。
1.组件基础
01.组件是可复用的Vue实例
02.组件中的data选项必须是一个函数
03.一个组件默认可以有任意数量的prop
任何值都可以传递给任何prop。就像访问data一样。
04.使用$emit监听子组件事件
一个全局的子组件代码：
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<button v-on:click="$emit('enlarge-text', 0.1)">放大文字</button>
<div v-html="post.content"></div>
</div>
`
})
父组件代码：
<blog-post v-bind:post="post" :style="{fontSize: postFontSize + 'em'}" v-on:enlarge-text="onEnlargeText"></blog-post>
var vm = new Vue({ el: '#app', data: { post: { id: 1, title: '给一个青年诗人的十封信', content: '<p>Vue从入门到实战</p>' }, postFontSize: 1 }, methods: { onEnlargeText: function (enlargeAmount) { this.postFontSize += enlargeAmount } } })
05.使用事件抛出一个值
子组件的一个事件可以通过$emit的第二个参数来提供一个值，在父级组件监听这个事件时，通过$event访问被抛出的这个值。
<blog-post ... v-on:enlarge-text="postFontSize += $event" ></blog-post>
06.在组件上使用v-model
自定义事件也可以用于创建支持v-model的自定义输入组件
<input v-model="searchText">
等价于：
<input v-bind:value="searchText" v-on:input="searchText = $event.target.value" >
当用在组件上时，v-model则会这样：
<custom-input v-bind:value="searchText" v-on:input="searchText = $event" ></custom-input>
为了让它正常工作，这个组件内的<input>必须：
- 将其value特性绑定到一个名叫value的prop上
- 在其input事件被触发时，将新的值通过自定义的input事件抛出
示例如下：
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
现在v-model就应该可以在这个组件上完美地工作起来了：
<custom-input v-model="searchText"></custom-input>
07.动态组件
Vue有一个<component>元素，它有一个is属性
<!-- 组件会在 `currentTabComponent` 改变时改变 --> <component v-bind:is="currentTabComponent"></component>
在上述示例中，currentTabComponent可以包括：
- 已注册组件的名字，或
- 一个组件的选项对象
08.特殊的is属性的妙用
有些html元素，诸如<ul>、<ol>、<table>、<select>，对于哪些元素可以出现在其内部是有严格限制的。
<table> <blog-post-row></blog-post-row> </table>
这个自定义组件<blog-post-row>会被作为无效的内容提升到外部，使用is特性可解决：
<table> <tr is="blog-post-row"></tr> </table>
2.Prop
01.Prop类型
props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor }
02.传入一个对象的所有属性
如果你想要将一个对象的所有属性都作为prop传入，你可以使用不带参数的v-bind取代b-bind:prop-name，例如：
post: { id: 1, title: 'My Journey with Vue' }
下面的模板：
<blog-post v-bind="post"></blog-post>
等价于：
<blog-post v-bind:id="post.id" v-bind:title="post.title" ></blog-post>
03.单向数据流
所有的prop都使得其父子prop之间形成了一个单向下行绑定
每次父级组件发生更新时，子组件中所有的prop都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变prop。
04.Prop验证
这在开发一个会被别人用到的组件时尤其有帮助。
Vue.component('my-component', {
props: {
//基础的类型检查
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 ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
注意：那些prop会在一个组件实例创建之前进行验证，所以实例的属性（如data、computed等）在default或validator函数中不可用。
05.类型检查
type可以时下列原生构造函数中的一个：
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
type还可以是一个自定义的构造函数，并且通过instanceof来进行检查确认。例如，给定下列现成的构造函数：
function Person (firstName, lastName) { this.firstName = firstName this.lastName = lastName }
你可以使用：
Vue.component('blog-post', {
props: {
author: Person
}
})
来验证author prop的值是否是通过new Person创建的
06.非Prop的特性
（1）组件可以接受任意的特性，而这些特性会被添加到这个组件的根元素上
（2）替换/合并已有的特性
对绝大多数特性来说，从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 type="text" 就会替换掉 type="date" 并把它破坏。 class 和 style会合并两边的值。
（3）禁用特性继承
如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false
Vue.component('my-component', {
inheritAttrs: false,
// ...
})
一个基础组件的例子：
Vue.component('base-input', {
inheritAttrs: false,
props: ['label', 'value'],
template: `
<label>
{{ label }}
<input
v-bind="$attrs"
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
</label>
`
})
注意：inheritAttrs: false不会影响style和class的绑定
这个模式允许你在使用基础组件的时候更像是使用原始的HTML元素，而不会担心哪个元素是真正的根元素
<base-input v-model="username" required placeholder="Enter your username" ></base-input>
笔记摘自Vue官方文档：