Vue 组件的使用

• 组件的两种命名方式

1. 使用 kebab-case

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

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

2. 使用 PascalCase

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

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

• 组件的注册与使用

1. 全局注册使用

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

   // 定义一个名为 button-counter 的新组件
   Vue.component('button-counter', {
   data: function () { //组件的data 必须是一个函数，保证每个实例维护一份被返回对象的独立的拷贝
   return {
   count: 0
   }
   },
   template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
   })
   new Vue({ el: '#components-demo' })