vue进阶（一），深入了解组件，自定义组件

本篇为笔者阅读官方教程后的笔记记录

1. 什么是Vue组件？

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

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
   
  data: function () {
   
    return {
   
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {
   { count }} times.</button>'
})

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

new Vue({
    el: '#components-demo' })

我们可以将组件进行任意次的复用：

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

注意：data()必须是一个函数，因为每一个组件实例都需要独立的数据，防止数据污染。
如果我们button-counter的data不是一个函数，他们会共用一个count，每一个button-counter组件都会影响其他的button-counter组件

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

2. 组件注册

2.1 组件名

在注册组件的时候，我们需要给它一个名字，这个名字就是该自定义组件的标签。

• kebab-case

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

推荐使用这种命名方式

• PascalCase

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

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

	<my-component-name></my-component-name>

2.2 全局注册

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

形如上文的组件注册就是全局注册，也就是说它们在注册之后可以用在任何新创建的Vue根实例的模板中：