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）

这类型的组件本身不渲染任何内容，主要负责将组件内容作为某种应用的延伸，或是某种机制的封装。像是我们未来会提及的<transition>、<router-view>等都属于此类型。

基本使用

直接上代码示例，为了方便测试，使用CDN引入vue.js。

<div id="app">
      <!-- 3.使用组件 -->
      <my-cpn></my-cpn>
      <my-cpn></my-cpn>
      <my-cpn></my-cpn>
      <!-- 需以‘-’连字符显示组件名，组件才能生效 -->
      <my-Component></my-Component>
      <!-- <myComponent></myComponent> -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
    <script>
      // 1.创建组件构造器对象
      const myComponent = Vue.extend({
        template: `
        <div>
          <h1>标题</h1>
          <p>hello world<p>
        </div>`,
      });
      // 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，例如 <my-component-name>。

使用 PascalCase

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

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

参考：

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

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