Vue2学习计划六：组件化

我们面对乱麻的时候，当然是快刀斩。面对复杂问题的时候，我们最佳方案就是将问题进行拆解成一个个小问题，然后一个一个的解决。

这同样适用于编程。如果将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续管理和维护。但如果将一个页面拆分成不同的供可能块，每个功能块都完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得很容易了。

同样在Vue中，也提供了一种抽象思想，让开发者可以开发出一个个独立可复用的小组件来构造开发者的应用，任何应用最终都会可以被抽象成一颗组件树。

一、组件化的基本使用过程

在Vue中，使用组件可以分成三个步骤：

1. 创建组件构造器，调用Vue.extend()方法创建组件构造器
2. 注册组件，调用Vue.component()方法注册组件
3. 使用组件，在Vue实例的作用范围内使用组件

在代码上展示一下：

<div id="app">
  <!-- 3.在Vue实例的作用范围为使用组件-->
  <my-cpn></my-cpn>
</div>
<script src="./../js/vue.js"></script>
<script>
  //1.创建组件构造器，传入的template代表我们自定义组件的模板
  const cpn = Vue.extend({
    template: '<div>' +
        '<h2>我是标题</h2>' +
        '<p>我是内容1</p>' +
        '<p>我是内容2</p>' +
        '</div>'
  })
  
  //2.将组件构造器注册为一个组件，并给该组件起一个组件标签名my-cpn，需要传递两个参数：第一个是祖册组件的标签名，第二个是组件构造器
  Vue.component('my-cpn', cpn)
  const app = new Vue({
    el: '#app'
  })
</script>

运行之后，就可以看到浏览器上显示了template里的内容。

二、全局组件和局部组件

全局和局部的区别也在于作用域范围。全局变量就是在整个程序中都可以使用，局部变量就是只能在一个部分使用。组件也是一样的道理。

那么这个全局组件和局部组件的区别在哪里？其实在于注册部分，如果在某个Vue实例中注册，则为局部组件，如果外Vue实例外面注册就是全局组件，即上一节的注册。全局组件可以在多个Vue实例中使用。

<div id="app">
<my-cpn></my-cpn>
</div>
<script src="./../js/vue.js"></script>
<script>
  const cpn = Vue.extend({
    template: '<div>' +
        '<h2>我是cpn标题</h2>' +
        '<p>我是cpn内容</p>' +
        '<p>我是cpn内容1</p>' +
        '</div>'
  })
  const app = new Vue({
    el: '#app',
    components: { //局部组件注册
      myCpn: cpn
    }
  })
</script>

三、父组件和子组件的区别

组件化的思维就是将一个复杂的问题分解成无数个小问题，那么这个大问题可能就会被分解成无数个父问题和子问题，甚至子、父、爷问题。

那什么是父组件，什么是子组件呢？在Vue里，我的理解是，假设有组件a和b，我在组件a的template中使用了组件b，并且在组件a的Vue实例中注册了b。那么a组件就是b组件的父组件，b组件是a组件的子组件。

那么，下面我们就来实现一下父组件和子组件

<div id="app">
  <cpn-father></cpn-father>
  <cpn-son></cpn-son>
</div>
<script src="./../js/vue.js"></script>
<script>
  const cpnSon = Vue.extend({
    template: '<div>' +
        '<h2>我是子组件的标题</h2>' +
        '<p>我是子组件的内容</p>' +
        '</div>'
  })
  const cpnFather = Vue.extend({
    template: '<div>' +
        '<h2>我是父组件的标题</h2>' +
        '<p>我是父组件的内容</p>' +
        '<cpn-son></cpn-son>' +
        '</div>',
    components: {
      cpnSon: cpnSon
    }
  })
  const app = new Vue({
    el: '#app',
    components: {
      cpnFather: cpnFather,
      cpnSon: cpnSon
    }
  })
</script>

cpnSon组件构造器是在cpnFather组件构造器的里面注册的，所以cpnSon就是cpnFather的子组件。而cpnFather又在app这个Vue实例里注册，是不是同样就是这个全局Vue实例的子组件呢？同样的代码里还验证了cpnSon组件可以在app这个实例里面注册，也可以在cpnFather里面注册，并不会相互影响使用。

代码运行结果：

四、组件简写和思考

4.1 注册组件的语法糖

我们在使用组件化的时候，需要三步：一是创建组件构造器，二是注册组件构造器，三是使用。有没有办法将一、二步合并？必然是有的，这就是注册组件的语法糖写法，也是实际使用中最常用的方法。

该语法糖写法省去了调用Vue.extend()的不走，直接使用一个对象来替代Vue.extend。同样也区分了局部组件语法糖写法和全局组件语法糖写法。最常用的就是局部组件语法糖，也是代码里最常见的部分，下面直接用代码展示：

<!--1. 全局组件写法-->
<div id="app">
  <cpn-son></cpn-son>
</div>
<script src="./../js/vue.js"></script>
<script>
  Vue.component('cpnSon', {
    template: '<div>' +
        '<h2>我是标题1</h2>' +
        '<p>我是内容，哈哈哈</p>' +
        '</div>'
  })
  const app = new Vue({
    el: '#app'
  })
</script>

<!--2. 局部组件写法-->
<div id="app">
  <cpn-son></cpn-son>
</div>
<script src="./../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    components: {
      cpnSon: {
        template: '<div>' +
            '<h2>我是标题1</h2>' +
            '<p>我是内容1</p>' +
            '</div>'
      }
    }
  })
</script>

局部组件写法是不是经常见到的样子？越来越熟悉了。那么，想问一下朋友们，Vue是响应式的，既然组件里看到了HTML元素，那么绑定的数据放在那里了？

4.2 组件的data为什么是函数

既然封装成一个个组件，那么必然数据是独立的，不然就不便于管理。组件在注册时，可以存放一些自己的data数据，这个data数据是函数型的，返回的实例对象。

Vue.component('cpn', {
	template: '#cpn',
	data(){
		return {
			title: 'abc'
		}
	}
})

那么为什么组件中数据要设计成函数？

因为使用组件化思维之后，一个大组件里有很多小组件，为了使组件能随时拆分和重组，那么每个组件的数据必须都是独立的。

可以试想一下，如果每个子组件的数据都放在一处，那么怎么区别哪个数据是哪个组件的。当我们要拆除组件A时，怎么才能确保干净的去除组件A的所有数据呢？所以只有当组件独立管理自己的数据时，才更方便组件化。

4.3 组件之间数据传输

这是一个值得细细讲的，比如子组件跟父组件传递数据。比如子组件访问父组件，父组件访问子组件。
那么我们下节再见。

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=17ez62mwalwk0