[toc]

什么是组件化

组件是可复用的 Vue 实例，且带有一个名字.

组件化思想

组件化是Vue.js中的重要思想
– 它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
– 任何的应用都会被抽象成一颗组件树。

有了组件化的思想，在之后的开发中就要充分的利用它
– 尽可能的将页面拆分成一个个小的、可复用的组件。
– 这样让我们的代码更加方便组织和管理，并且扩展性也更强。

组件的组织: 通常一个应用会以一棵嵌套的组件树的形式来组织

可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

注册组件步骤解析

• 组件的使用分成三个步骤：
  • 创建组件构造器: Vue.extend()
  • 注册组件: Vue.component()
  • 使用组件。
• 1.Vue.extend()：
  • 调用Vue.extend()创建的是一个组件构造器。
  • 通常在创建组件构造器时，传入template代表我们自定义组件的模板。
  • 该模板就是在使用到组件的地方，要显示的HTML代码。
  • 事实上，这种写法在Vue2.x的文档中几乎已经看不到了，它会直接使用下面我们会讲到的语法糖，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。

  // 1.创建组件构造器对象
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是内容, 哈哈哈哈</p>
        <p>我是内容, 呵呵呵呵</p>
      </div>`
  })

• 2.Vue.component()：
  • 调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
  • 所以需要传递两个参数：1、注册组件的标签名 2、组件构造器

  // 2.注册组件
  Vue.component('my-cpn', cpnC)

• 3.组件必须挂载在某个Vue实例下，否则它不会生效。(见下图)
  • 我们来看下面我使用了三次
  • 而第三次其实并没有生效：

<div id="app">
  <!--3.使用组件-->

  <my-cpn></my-cpn>
  <div>
    <my-cpn></my-cpn>
  <div>
</div>
<my-cpn></my-cpn>

全局组件和局部组件

• 当我们通过调用Vue.component()注册组件时，组件的注册是全局的,这意味着该组件可以在任意Vue示例下使用。

Vue.component('cpn', cpnC)

• 如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      // cpn使用组件时的标签名
      cpn: cpnC
    }
  })

父组件和子组件

• 组件和组件之间存在层级关系
• 而其中一种非常重要的关系就是父子组件的关系

模板分离

• Vue提供了两种方案来定义HTML模块内容：
  • 使用