01 怎么理解Vue中的组件？

Q1:什么是组件？

组件是可复用的Vue实例，且带有一个名字（内心os：不就是可重复使用的Vue实例么...)

Q2: 为什么要使用组件？

为了提高代码的复用性 (内心os: 这应该和函数封装是一个道理吧....)

Vue组件示例

  <!-- html中的内容,把 my-component 这个组件作为自定义元素来使用-->
  <div id="component-demo">
      <my-component></my-component>
  </div>
  <script>
// 定义一个名为 my-component 的新组件
     Vue.component('my-component',{
      data: function(){
        return {
          count: 0
        }
      },
      template: ' <button v-on:click="count++">你点击了{{count}}次</button>'
    })
// 我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：
    new Vue({el:'#component-demo'})
  </script>

总结：

1. 注册一个自定义的组件
2. 通过 new Vue创建 Vue 实例，并将实例挂载到DOM上
3. 在对应的 html 中将自定义的组件作为自定义元素来使用

Q3: 组件只有注册了才能被Vue识别，那组件注册的类型有哪些呢？

有两种组件注册类型：局部注册和全局注册

• 全局注册：全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

<div id="app">
    <my-comp></my-comp>
</div>

 Vue.component('my-comp',{
       template:'<h3>我是新出炉的组件</h3>'
    })

 new Vue({
      el: "#app",
      data: {

      }
    })

• 局部注册：局部注册的组件在其子组件中不可用

  <div id="app">
    <my-comp></my-comp>
  </div>

  new Vue({
    el: "#app",
    components:{
        'my-comp':{template:'<h3>我是新出炉的组件</h3>'}
    },
    data: {

    }
  })

Q4: 组件的名字有什么讲究么？

答案是当然有了

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

• 在注册一个组件的时候，我们始终需要给它一个名字,该组件名就是 Vue.component 的第一个参数
• 定义组件名的方式有两种： kebab-case 和 PascalCase
  • 当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。
  • 当使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

组件使用的奇淫技巧

1. 推荐使用小写字母加­进行命名（必须） child, my­componnet命名组件
2. template中的内容必须被一个DOM元素包括 ，也可以嵌套
3. 在组件的定义中，除了template之外的其他选项—data,computed,methods
4. data必须是一个方法