Vue注册组件

一、注册组件的基本步骤

组件的使用简单描述为如下三个步骤：

1. 创建组件
2. 注册组件
3. 使用组件

二、创建组件的两种方式

方式一

通过vue.extend()方式创建组件

    // 1.创建组件构造器对象
    const cnpC = Vue.extend({
      template: `
        <div>
          <h2>这是标题</h2>
          <p>这是内容，第一段</p>
          <p>这是内容，第二段</p>
        </div>
      `
    })

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

    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    })

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

方式二

直接注册全局组件，也称为vue的语法糖形式

    // 1.创建并注册vue全局组件
    Vue.component('my-cpn', {
      template: `
        <div>
          <h2>这是标题</h2>
          <p>这是内容，第一段</p>
          <p>这是内容，第二段</p>
        </div>
      `
    })
    
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    })

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

三、全局组件和局部组件

以上两种方式直接挂载到Vue对象上面的都属于全局组件

全局组件即在全局范围内都可以使用该组件；
局部组件即只有在该vue实例控制的范围内才能使用该组件；

局部组件的方式如下：在vue对象中的components属性里去注册定义好的组件

    // 1.创建组件构造器对象
    const cnpC = Vue.extend({
      template: `
        <div>
          <h2>这是标题</h2>
          <p>这是内容，第一段</p>
          <p>这是内容，第二段</p>
        </div>
      `
    })

    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: { //2.注册组件
        'my-cpn': cnpC
      }
    })

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