vue.js之组件（component）

vue.js之组件（component）
组件与组件化

组件(Component) 是Vue 最主要也是最强大的特性之一，它提供了HTML DOM 元素的扩展性，也可将部分模板、程序代码封装起来以便开发者维护以及重复使用。

传统网页的结构，从早期的「意大利面式程序码」(Spaghetti code) 把所有的东西通通往HTML 页面塞，到后来将CSS、Javascript 从HTML 结构抽离，这是表现层级上的关注点分离。但是当项目的架构越来越大，人们开始把关注点从表现层移到了架构层面，思考如何将功能、逻辑抽象化，将封装好的UI 模块、功能重复使用，就如同乐高积木一般。

每一个被封装后的组件单元，都含有自己的模板（templates）、样式（style），与行为逻辑（script），并且可以被重复使用。而在组件之中又可以含有组件，这样由一个个组件单元组合而成的「组件树」，就是Vue.js 组件系统的概念。

组件的分类与切分

当我们开始要把网页转换成模块区域来管理的时候，首先面临的问题，组件该怎么拆？

要是范围切得太大，组件过于庞大，切得太细则组件数量太多。再者，组件之间要是彼此耦合程度高，反而不容易维护，还不如不拆。那么，接下来就来谈谈几种常见的组件分类方法。

常见的组件类型，大致可以分作这几种类型：
- 展示型（Presentation）
以负责呈现UI 为主的类型，我们很单纯地把数据传递进去，然后DOM 就根据我们丢进去的数据生成出来。这种组件的好处是可以提升UI 的重复使用性。
- 容器型（Container）
这类型的组件主要负责与数据层的service 沟通，包含了与server 端、数据来源做沟通的逻辑，然后再将数据传递给前面所说的展示型组件。
- 互动型（Interactive）
像是大家所熟知的elementUI、bootstrap 的UI library 都属于此种类型。这种类型的组件通常会包含许多的互动逻辑在里面，但也与展示型组件同样强调重复使用。像是表单、弹窗等各种互动元素都算在这类型。
- 功能型（Functions）
这类型的组件本身不渲染任何内容，主要负责将组件内容作为某种应用的延伸，或是某种机制的封装。像是我们未来会提及的、等都属于此类型。

基本使用

直接上代码示例，为了方便测试，使用CDN引入vue.js。
```
<div id="app">
      
      <my-cpn>my-cpn>
      <my-cpn>my-cpn>
      <my-cpn>my-cpn>
      
      <my-Component>my-Component>
      
    div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js">script>
    <script>
      // 1.创建组件构造器对象
      const myComponent = Vue.extend({
        template: `
        
          标题
          hello world
        
`,
```
});
// 2.注册组件 /全局注册(Global Registration)
Vue.component("my-cpn", myComponent);
const app = new Vue({
el: "#app",
data: {},
components: {
myComponent: myComponent, // 局部注册(Local Registration)
},
});

效果如下：

注：my-cpn 是全局组件的名字，myComponent 是定义的组件对象。

定义组件名的方式有两种：

使用 kebab-case （推荐）
Vue.component('my-component-name', { /* ... */ })
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如。

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

参考：

https://v2.cn.vuejs.org/v2/guide/components.html

https://book.vue.tw/CH2/2-1-components.html

组件与组件化

组件的分类与切分

基本使用

标题