本文共 2067 字，大约阅读时间需要 6 分钟。

组件基础

Vue.component(）自定义全局或者局部组件，组件间相互独立且可复用：

vue组件示例：

效果如下，两个按钮组件的参数相互独立：

在这个示例中，number-component为组件名称。

data 必须是一个函数

当我们定义这个 <number-componentr> 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：

data: {  count: 0}

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

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

如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例

通过 Prop 向子组件传递数据

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

Vue.component('blog-post', {  props: ['title'],  template: '
{{ title }}
'})

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。

以下 html 实现了动态传递 prop:

单个根元素

当构建一个 <number-componentr> 组件时，你的模板最终会包含的东西远不止一个标题，所以props 可以包含一个object对象：

组件命名规范

使用 kebab-case

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

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

使用 PascalCase

Vue.component('MyComponentName', { /* ... */ })

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

组件注册

全局注册

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

局部注册

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

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

然后在 components 选项中定义你想要使用的组件：

new Vue({  el: '#app',  components: {    'component-a': ComponentA,    'component-b': ComponentB  }})

简单例子如下：

在模块系统中局部注册

如果你还在阅读，说明你使用了诸如 Babel 和 webpack 的模块系统。在这些情况下，我们推荐创建一个 components 目录，并将每个组件放置在其各自的文件中。

然后你需要在局部注册之前导入每个你想使用的组件。例如，在一个假设的 ComponentB.js 或 ComponentB.vue 文件中：

import ComponentA from './ComponentA'import ComponentC from './ComponentC'export default {  components: {    ComponentA,    ComponentC  },  // ...}

现在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。

更详细的用法参考官方文档：