我是怎么学会vue的14：组件的基本使用

组件化，即把整个页面拆分成一个个组件，开发一个个独立、可复用的小组件，即可构建起一个应用。这样可以让代码更方便的组织和管理，扩展性也更强。

开发出来的应用会形成一个组件树（树结构是一种数据结构）。

组件化与模块化不同，后面会讲到模块化，并对比组件和模块的区别。

封装组件的步骤

1. 创建组件构造器 Vue.extend() 需要传入一个对象

   Vue.extend创建的是一个组件构造器，通常在创建构造器时，传入template作为我们自定义组件的模板。

   Vue.component这种写法在2.X文档中几乎看不到了，一般使用语法糖的形势来写。见下文。

2. 注册组件（全局注册、局部注册）

   Vue.component(注册组件的标签名，组件构造器)

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

3. 使用组件（在Vue实例的作用域之内来使用组件）

演示：

<div id="app">
  <!--3.使用组件  需要在实例内使用-->
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
</div>

<script src="../js/vue.js"></script>
<script>
  // 1.创建组件构造器对象 传入的是一个对象
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是内容</p>
      </div>`
  })

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

  const app = new Vue({
    el: '#app',
    data: {
     
    }
  })
</script>

全局组件和局部组件

封装组件的第二步是注册组件，在全局下注册的就是全局组件，在某个实例中注册的就是局部组件。

真实开发中用局部组件的比较多。

全局组件

全局组件可以在多个vue实例里面使用。但是真实开发中一般只有一个vue实例，所以全局组件用的比较少。

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
</div>

<div id="app2">
  <cpn></cpn>
</div>

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

  const app = new Vue({
    el: '#app',
  })
  const app2 = new Vue({
    el: '#app2'
  })
   
  // 2.注册组件(全局组件, 意味着可以在多个Vue的实例下面使用)
  //这个组件注册在全局下面，所以是全局组件
  Vue.component('cpn', cpnC)
</script>

局部组件

注册在Vue实例下面的，就是局部组件。局部组件只能在注册的那个实例里面使用。

局部组件注册方法：

const app = new Vue({
    el: '#app',
    components: {
      // 使用组件时的标签名，组件构造器
      cpn: cpnC
    }
})

代码演示：

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>

<script>
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是内容</p>
      </div>
    `
  })

  const app = new Vue({
    el: '#app',
    components: {
      // cpn使用组件时的标签名
      cpn: cpnC
    }
  })
</script>

使用语法糖注册组件

前面说到Vue.extend这种写法已经很少见了，现在都使用语法糖的写法。

使用语法糖注册全局组件

<div id="app">
  <cpn1></cpn1>
</div>

<script src="../js/vue.js"></script>
<script>
Vue.component('cpn1', {
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是内容</p>
      </div>
    `
})

const app = new Vue({
    el: '#app'
})
</script>

使用语法糖注册局部组件

<div id="app">
  <cpn2></cpn2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    components: {
      'cpn2': {
        template: `
          <div>
            <h2>我是标题2</h2>
            <p>我是内容</p>
          </div>
    `
      }
    }
  })
</script>

使用模板分离的写法注册组件

上面演示中，在template里面写了很多html标签，看起来很乱；我们需要把这些HTML标签分离出来，有2种分离的写法。

写法1：使用script标签（不常用）

• 把html标签放到script标签里面
• 注意：script的类型必须是text/x-template，并加上id属性
• 最后挂载到对应的组件上template: '#cpn'

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
</div>

<script type="text/x-template" id="cpn">
<div>
  <h2>我是标题</h2>
  <p>我是内容</p>
</div>
</script>

<script src="../js/vue.js"></script>
<script>
  // 注册一个全局组件
  Vue.component('cpn', {
    template: '#cpn'
  })

  const app = new Vue({
    el: '#app'
  })
</script>

写法2：使用template标签（常用）

• 把标签放到template标签里面，并加上id属性
• 再挂载到对应的组件上template: '#cpn'

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
</div>

<template id="cpn">
  <div>
    <h2>我是标题</h2>
    <p>我是内容</p>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  // 注册一个全局组件
  Vue.component('cpn', {
    template: '#cpn'
  })

  const app = new Vue({
    el: '#app'
  })
</script>