Vue组件之自定义组件&全局组件&局部组件

VUE中的组件

将页面中重复的的功能抽离出来封装成一个单独的组件，在任何需要的地方使用该组件，这样既减少了 逻辑复杂度 , 又能提高代码的可复用程度和可维护性。

• Vue 中的组件是自定义的标签,可以扩展原生的html元素,封装可重用的代码。
• 一个 自定义标签 Vue 就会把他看成一个组件， 自定义标签原本没有实际意义，但是 Vue 会给这些标签赋予一定的意义。
• 每个组件都是一个 Vue 的实例，那么这个组件也有自己的生命周期，并且也有 data、computed、methods、watch这些属性，每个组件都有自己私有的数据。

组件命名

定义组件名的方式有两种：
1、使用 kebab-case（短横线分隔命名）

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

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

2、使用 PascalCase（首字母大写命名）

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

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

自定义组件 & 全局组件 & 局部组件</