组件基础

基本示例

这里是一个 Vue 组件示例:

// 定义一个新的组件,名称为 button-counter
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">你点击了 {{ count }} 次。</button>'
})

组件(component),是具有 name 名称的可复用 Vue 实例:当前示例中是 <button-counter>。我们可以使用 new Vue 创建出一个 Vue 根实例,然后将这个组件作为其中的一个自定义元素(custom element):

<div id="components-demo">
<button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })

由于组件是可复用的 Vue 实例,它们接收的选项,和在 new Vue 时候的选项相同,例如 data, computed, watch, methods 和生命周期钩子。唯一的例外是,类似 el 这样,根实例上特有(root-specific)的选项。

重复使用组件

可以根据需要,多次重复使用组件:

<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>

注意,当点击按钮时,每个按钮都维护彼此独立的 count。这是因为每次使用组件时,都会创建出一个新的组件实例

data 必须是一个函数

当我们定义 <button-counter> 组件时,你可能已经注意到,提供给组件定义对象的 data,并不是如下所示的一个对象:

data: {
count: 0
}

相反,组件的 data 选项必须是一个函数,以便每个实例都可以维护「函数返回的数据对象」的彼此独立的数据副本:

data: function () {
return {
count: 0
}
}

如果 Vue 没有遵循这个规定,点击其中一个按钮,会影响其他所有用到此 data 的组件实例,如下所示:

将组件组合在一起

通常都会将一个应用程序,组织为一个嵌套的组件树:

组件树

例如,你的组件可能有 header,sidebar 和 content 三个区域,每个组件都包含导航链接、博客文章等其他组件。

想要在模板中使用这些组件,就必须先进行注册,以便 Vue 能够找到它们。组件注册有两种方式:全局注册局部注册。到目前为止,我们只通过 Vue.component 在全局注册组件:

Vue.component('my-component-name', {
// ... options ...
})

全局方式注册的组件,可以用于之后创建的所有(通过 new Vue 创建的)Vue 根实例,以及 Vue 实例组件树中所有子组件的内部。

现在,你仅需要知道组件注册的这些相关知识,等到你阅读完这个页面,并且能够很好适应这些内容,我们建议你稍后回到这里,继续深入阅读 组件注册 的完整指南。

使用 props 向子组件传递数据

前面我们