Vue 组件化-什么是组件化？

🎉 组件化的实现和使用步骤？

如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。

但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。

步骤：

① 创建组件的构造器

② 注册组件

③ 使用组件

🎉 组件化的基本使用过程？

1
2
3
4
5
6
7
8
9
10
const cpnC = Vue.extend({
  template: `
  <div>
  <h2>我是标题</h2>
  <p>我是内容1</p>
  <p>我是内容2</p>
  </div>
  `,
}); //1.创建构造器对象
Vue.component(`my-cpn`, cpnC); //2.注册组件

1.Vue.extend()：

调用 Vue.extend()创建的是一个组件构造器。

通常在创建组件构造器时，传入 template 代表我们自定义组件的模板。

该模板就是在使用到组件的地方，要显示的 HTML 代码。

事实上，这种写法在 Vue2.x 的文档中几乎已经看不到了，它会直接使用下面我们会讲到的语法糖，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。

2.Vue.component()：

调用 Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。

所以需要传递两个参数：1、注册组件的标签名 2、组件构造器

3.组件必须挂载在某个 Vue 实例下，否则它不会生效。

🎉 全局组件和局部组件？

当我们通过调用 Vue.component()注册组件时，组件的注册是全局的，

这意味着该组件可以在任意 Vue 示例下使用。

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

1
2
3
4
5
6
7
8
9
10
Vue.component(`my-cpn`,cpnC);   //这里是注册的全局组件
const app = new Vue({
  el:'#app',
  data:{
    message:'你好！'
  }，
  component:｛
    cpn:cpnC   //这里是注册的局部组件
  ｝
})

🎉 父组件和子组件？

组件和组件之间存在层级关系

而其中一种非常重要的关系就是父子组件的关系

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script>
  const cpnC1 = Vue.extend({
     template:`
<div>
<h2>我是标题1</h2>
<p>我是子组件</p>
</div>
     `
  });
  const cpnC2 = Vue.extend({
    template:`
<div>
<h2>我是标题2</h2>
<p>我是父组件</p>
<cpn1></cpn1>
</div>
     `,
    components: {
      cpn1:cpnC1
    }
  });
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好！'
    },
    components: {
      cpn2:cpnC2
    }
  })
</script>

🎉 注册组件的语法糖？

在上面注册组件的方式，可能会有些繁琐。

Vue 为了简化这个过程，提供了注册的语法糖。

主要是省去了调用 Vue.extend()的步骤，而是可以直接使用一个对象来代替。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Vue.component("cpn1",{
  template:`
<div>
<h2>我是标题2</h2>
<p>我是全局组件</p>
<cpn1></cpn1>
</div>
     `
})   //注册全局组件
 components: {
      cpn2:{
  template:`
<div>
<h2>我是标题2</h2>
<p>我是局部组件</p>
<cpn1></cpn1>
</div>
     `
}
 }  //注册局部组件

🎉 组件模板的抽离？

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

使用 script 标签

使用 template 标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//方案一，在外部写具有type为text/x-template的script
<script type="text/x-template" id="mycpn1">
<div>
<h2>我是标题2</h2>
<p>我是局部组件</p>
<cpn1></cpn1>
</div>
<script>
Vue.component("cpn1",{
  template:"#mycpn1"
})
//方案一，在外部写template标签
<template id="mycpn1">
<div>
<h2>我是标题2</h2>
<p>我是局部组件</p>
<cpn1></cpn1>
</div>
</template>
Vue.component("cpn1",{
  template:"#mycpn1"
})

🎉 为什么组件的 data 必须是函数？

组件对象也有一个 data 属性(也可以有 methods 等属性，下面我们有用到)

只是这个 data 属性必须是一个函数

而且这个函数返回一个对象，对象内部保存着数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Vue.component("cpn1",{
  template:
  `
<div>
<h2>{{title}}</h2>
<p>我是局部组件</p>
<cpn1></cpn1>
</div>
  `
     ，
  data(){
    return {
      title:"abc"，
    }
  }
})