Vue为什么要使用组件化以及创建组件的三种写法

一、为什么要使用组件化？

将一个页面的业务处理逻辑放在一起，处理和维护起来就会很复杂，不利于后续管理和扩展，这个时候就需要使用组件化来分门别类的管理逻辑

如果将页面拆分为一个个小的功能块，每个功能块只实现自己的内容，之后对页面的管理和维护就变得非常容易了

二、创建组件的基本步骤

方式一：全局组件

1.创建组件构造器

  // 创建组件构造器对象
  const cpn1=Vue.extend({
    template:`
      <div>
        <h1>Hello World</h1>
        <p>我是组件1</p>
      </div>
  }) 

2.调用Vue.component方法注册组件

	  //  注册组件
  Vue.component("mycpn1",cpn1)

3.在Vue实例的作用范围内使用组件

<div id="box">
   <mycpn1></mycpn1>
 </div>

可以在多个Vue的实例下使用
Vue.component(“mycpn1”,cpn1)

方式一：局部组件

仅可以在当前Vue的实例下使用

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

组件之间存在层级关系

方式二：注册全局组件 语法糖

Vue.component('cpn1',{
      template:`
        <div>
          <h2>大家好！</h2>
          <p>我是全局组件</p>
        </div>
      `
    })

方式二：注册局部组件 语法糖

var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components:{
        'cpn2' :{
          template:`
          <div>
           <h2>大家好</h2>
           <p>我是局部组件</p>
         </div>
         `
        }
      }
    });

以上省去了调用extend的步骤

方式三：组件模板抽离法

利用template标签

<template id='cpn'>
  <div>
    <h1>大家好！</h1>
    <p>我是抽离法创建出来的组件</p>
  </div>
</template>

<script>
    Vue.component('cpn',{
      template: '#cpn'，
    })
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
</script>