Vue 组件(一)

一、概念

        首先我们先看一个Vue组件的实例

<div id="app">
    <counter></counter>
</div>
<script>

// 定义一个名为 counter 的新组件
Vue.component('counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button @click="count++">你点击了 {{ count }} 次.</button>'
})
new Vue({ el: '#app' })
</script>

        组件是可复用的 Vue 实例，且拥有名字，可以作为自定义元素来使用

        注意:

        因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项

二、组件的复用

你可以将组件进行任意次数的复用：

<div id="app">
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>

注意：

        1、当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。 

        2、组件内 data 必须为一个函数，如果不是函数，点击一个按钮就可能会影响到其它所有实例。

三、注册组件

   1.组件名

 在注册一个组件的时候，我们始终需要给它一个名字。在上面的示例中我们看到:

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

其中 counter 就是我们这个组件的组件名 。组件名就是 Vue.component 的第一个参数。

我们为组件命名时推荐使用 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)

 2.组件名的大小写

        我们为组件命名时会有两种情况:

a. kebab-case (短横线分隔命名)

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

  当使用 kebab-case 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

b. PascalCase (首字母大写命名)

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

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

3.全局注册

        到目前为止，我们只用过 Vue.component 来创建组件：

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

 这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。例如:

Vue.component('btn-a', { /* ... */ })
Vue.component('btn-b', { /* ... */ })
Vue.component('btn-c', { /* ... */ })

new Vue({ el: '#app' })

<div id="app">
   <btn-a></btn-a>
   <btn-b></btn-b>
   <btn-c></btn-c>
</div>

在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。

4.局部注册

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

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

var A = { /* ... */ }
var B = { /* ... */ }
var C = { /* ... */ }

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

new Vue({
  el: '#app',
  components: {
    'a':A,
    'b':B,
    'c':C,
  }
})

注意   局部注册的组件在其子组件中不可用。例如，如果你希望 A 在 B 中可用，则你需要这样写：

var A = { /* ... */ }

var B = {
  components: {
    'a': A
  },
  // ...
}