Vue组件是什么？

1. 背景介绍

组件是可复用的 Vue 实例, 如果网页中的某一个部分需要在多个场景中使用，那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率。

1. 知识剖析

组件的组织
通常一个应用会以一棵嵌套的组件树的形式来组织： 

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型： 
全局注册和局部注册。

全局注册
Vue.component('my-component-name', {
// ... options ...
})
1
2
3
局部注册
全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。 
在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

var ComponentA = { / ... / }
var ComponentB = { / ... / }
var ComponentC = { / ... / }

new Vue({
el: '#app'
components: {

'component-a': ComponentA,
'component-b': ComponentB

}
})
1
2
3
4
5
6
7
8
9
10
11

1. 常见问题

父子组件的通信问题

1. 解决方案

通过 Prop 向子组件传递数据

早些时候，我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的。这也正是 prop 的由来。

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表

Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
1
2
3
4
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。

一个 prop 被注册之后，你就可以像这样把数据作为一个自定义特性传递进来：

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
1
2
3

1. 扩展思考

如何使子组件的值传递到父组件中？

通过事件向父级组件发送消息 
有如下组件：

Vue.component('blog-post', {
props: ['post'],
template: `

<div class="blog-post">
  <h3>{{ post.title }}</h3>
  <button>
    Enlarge text
  </button>
  <div v-html="post.content"></div>
</div>

`
})
1
2
3
4
5
6
7
8
9
10
11
12
当点击这个按钮时，我们需要告诉父级组件放大所有博文的文本。幸好 Vue 实例提供了一个自定义事件的系统来解决这个问题。我们可以调用内建的 $emit 方法并传入事件的名字，来向父级组件触发一个事件：

<button v-on:click="$emit('enlarge-text')">
Enlarge text
</button>
1
2
3
然后我们可以用 v-on 在博文组件上监听这个事件，就像监听一个原生 DOM 事件一样：

<blog-post
...
v-on:enlarge-text="postFontSize += 0.1"

</blog-post>
1
2
3
4
使用事件抛出一个值

有的时候用一个事件来抛出一个特定的值是非常有用的。例如我们可能想让 组件决定它的文本要放大多少。这时可以使用 $emit 的第二个参数来提供这个值：

<button v-on:click="$emit('enlarge-text', 0.1)">
Enlarge text
</button>
1
2
3
然后当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值：

<blog-post
...
v-on:enlarge-text="postFontSize += $event"

</blog-post>
1
2
3
4

1. 编码实战
2. 参考文献

Vue组件基础

1. 更多讨论

Q1: 能够在子组件中更改父组件传入的props属性吗？ 
A1: 能！ 但是并不建议这样做，在Vue中props属性是单向的数据流。如果想要修改该属性，应该使用data或者computed来代替。

var component1 = {

props: ['title'],
data () {
    return {
        myTitle: this.title;
    }
}

}
1
2
3
4
5
6
7
8
Q2: data属性在组件中必须是一个函数吗？ 
A2: 是！ 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝，如果 Vue 没有这条规则，会影响到其它所有复用的实例。 
Q3: 为什么监听不到自定义的事件？ 
A3: 跟组件和 prop 不同，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件：

this.$emit('myEvent')
1
则监听这个名字的 kebab-case 版本是不会有任何效果的：

<my-component v-on:my-event="doSomething"></my-component>
1
跟组件和 prop 不同，事件名不会被用作一个 JavaScript 变量名或属性名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

因此，我们推荐你始终使用 kebab-case 的事件名。