又到了愉快的周末，今天下了一天的雨了，我又日常宅宿舍打游戏、刷剧、听音乐写写代码。

前面的基础语法记录完了，接下记录的Vue的组件

01认识组件化什么是组件化？

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

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

Vue组件化思想:

组件化是Vue.js中的重要思想:

1. 它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。

2. 任何的应用都会被抽象成一颗组件树

   

组件化思想的应用：

• 有了组件化的思想，我们在之后的开发中就要充分的利用它。

• 尽可能的将页面拆分成一个个小的、可复用的组件。

• 这样让我们的代码更加方便组织和管理，并且扩展性也更强。

02注册组件1注册组件的基本步骤

组件的使用分成三个步骤:

1. 创建组件构造器 调用Vue.extend()方法创建组件构造器

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

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

   

这样看起来似乎不好体现优点，但如果内容多的时候，然后多个地方都使用这个组件就能体行出来了。

2注册组件步骤解析

解释一下上面的三个步骤的含义：

1、Vue.extend()：

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

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

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

这种方法是最原始方法，现在很少见了  我们一般使用语法糖

2.Vue.component()：

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

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

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

• 我们使用了三次，而第三次其实并没有生效

全局组件和局部组件1.当我们通过调用Vue.component()注册组件时，注册的组件是全局的，这意味着该组件可以在任意Vue实例下使用

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

这里我将使用到另一个属性components 与之前的methods那些同级

采用对象形式 键为组件的名字 值为构造器创建的模板

我们将组件cpn挂载在实例1中 那么其它实例就用不了，控制台还会报错：

注意 我们最常使用的是局部组件 而且一般只有一个Vue实例

父组件和子组件

我们在父组件中挂载了子组件的同时也使用了子组件标签

其实Vue实例我们也可以把它当成一个根组件

语法糖注册组件

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

Vue为了简化这个过程，提供了语法糖形式

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

全局组件注册：

局部组件：

模板的分离写法

刚才，我们通过语法糖简化了Vue组件的注册过程，另外还有一个地方的写法比较麻烦，就是template模块写法。

如果我们能将其中的HTML分离出来写，然后挂载到对应的组件上，结构会变得非常清晰。

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

使用标签 注意要设置type和id

 <div id="app">    <cpn>cpn>  div>  <script src="./vue.js">script>    <script type="text/x-template" id="cpn">    <div>      <h4>组件的内容h4>      <h4>组件的内容h4>    div>script>  <script>    const vue = new Vue({      el: '#app',      components: {        cpn: {          template: '#cpn'        }      }    });

使用标签 要设置id属性进行对应

<div id="app">    <cpn>cpn> div>    <template id="cpn">    <div>      <h4>组件的内容h4>      <h4>组件的内容h4>    div>  template>  <script src="./vue.js">script>  <script>    const vue = new Vue({      el: '#app',      components: {        cpn: {          template: '#cpn'        }      }    });

这篇先记录到这，下篇记录组件之间数据的访问传递，有啥问题欢迎关注公众号留言或添加微信私聊 感谢！

微信号：LinSB0315扫码关注我们了解更多精彩