VUE 组件化开发与组件思想入门篇

1. 组件化概念

组件化开发，组件化思想是VUE的核心之一。它提供了一种抽象树，让我们可以开发出一个个独立可复用的的小组件来构造我们的应用。它的应用都会被抽象成一棵组件树。

组件化理解及优势

一个页面可以拆分成一个一个的组件，每个组件有着自己独立的结构，样式，行为。组件化开发在复杂的页面中，将页面划分成组件便于维护。组件开发便于定位问题，便于维护。

2. 组件组成

每个组件的组成包含三个部分：template，style，script。分别是组件模板，组件样式，组件数据逻辑处理。

3. 组件分类与注册

3.1. 组件分类

组件分为两类：分为全局组件，局部组件。

3.2. 组件注册

组件注册方式有两种：全局注册，局部注册。全局注册的组件，在所有组件范围内均能使用。局部注册的组件只能在组件内使用。

// *************全局组件注册流程*************// 1. main.js文件中// 2. import 导入组件import xxx from xxx // 3. 注册组件，全局组件一次只能注册一个Vue.component('组件名','组件值')

局部注册组件：在使用的组件内进行组件导入，并进行局部注册components:{组件名：组件对象} 组件对象与组件名同名可简写。要区分components和component两者。

4. 组件的使用步骤

1. 创建组件构造器对象（组件在没有硬性规定的情况下，采取大驼峰命名，这是不成文的约定）。

2. 注册组件（全局注册或者局部注册）。

3. 使用组件。

代码案例：

<div id="app">   <h2>{{message}}</h2>   <!-- 3. 使用组件：你自己愿意使用几次就使用几次，组件也可以嵌套在元素中使用 -->   <my-cpn></my-cpn>   <my-cpn></my-cpn></div><script>   // 1. 创建组件构造器   const cpn = Vue.extend({       template:`        <div>          <h2>我是标题</h2>          <p>我是内容，呵呵呵呵呵</p>         </div>      `,    })   // 2. 注册组件 语法：Vue.component("组件的名称",注册的组件);   Vue.component('my-cpn',cpn);   const app = new Vue({       el:'#app',       data:{          message:"hello vue"       }    });</script>

5. 全局组件

全局组件可以在多个vue实例下面使用。在实际开发中一个页面只会有一个vue实例，但是注册的全局组件可以在多个vue实例中使用。

代码案例：​​​​​​​

<div id="app">   <h2>{{message}}</h2>   <!-- 3. 使用组件：你自己愿意使用几次就使用几次，组件也可以嵌套在元素中使用 -->   <my-cpn></my-cpn>   <my-cpn></my-cpn></div><script>   // 1. 创建组件构造器   const cpn = Vue.extend({       template:`        <div>          <h2>我是标题</h2>          <p>我是内容，呵呵呵呵呵</p>         </div>      `,    })   // 2. 注册组件 语法：Vue.component("组件的名称",注册的组件);   Vue.component('my-cpn',cpn);   const app = new Vue({       el:'#app',       data:{          message:"hello vue"       }    });</script>

脚手架环境注册全局组件：

1. 首先创造一个.vue组件。

2. 在main.js文件中，进行全局组件的注册。

3. 导入组件。

import xxx from xxx.vue   // 导入创建完成的 .vue 组件

4. 注册全局组件，注意：一次只能注册一个组件。

Vue.component('组件名'，'组件值')

6. 局部组件 

一个父组件中可以有1~N个子组件。

代码案例：​​​​​​​

 <div id="app">    <h2>{{message}}</h2>  <!-- 3. 使用局部组件 -->    <my-cpn></my-cpn>    <my-cpn></my-cpn>  </div>  <script>    // 1. 创建组件构造器    const cpn = Vue.extend({      template:`        <div>          <h2>我是标题</h2>          <p>我是内容，呵呵呵呵呵</p>          </div>      `,    })
const app = new Vue({   el:"#app",   data:{      message:"hello vue"   },// 2. 局部注册组件（局部注册的组件只能在当前挂在的vue实例下面进行使用，不能在其它的vue实例下面进行使用。）     components:{      "my-cpn":cpn    }});

脚手架环境注册局部组件：

1.创建.vue文件。

2. import导入到需要注册的组件。

3. 在components中进行组件注册。

4. 在template中使用组件。

提示：通常情况下是在脚手架中进行开发的，CDN方式引入开发很少见，了解即可。

7. scoped 作用和原理 

7.1. scoped 作用及使用

1. 在组件化开发中样式它是分为全局作用域和局部作用域的，区分作用域使用scoped属性，作用在stle标签中。

2. scoped局部作用域，作用于当前组件，全局样式容易造成多组件样式冲突。

3. 默认情况下创建组件样式作用到全局作用域，在实际开发中尽量改成局部作用域，避免样式冲突。​​​​​​​

<style scoped>  /* 样式内容...... */  </style>

7.2. scoped 原理

1. 给当前组件添加了scoped属性，style添加了data-hash值。例如：data-v-3c83f0b7。

2. CSS选择器后面会被自动处理，添加了属性选择器，例如：ul[data-v-3c83f0b7]。