一、概念

什么是组件：

组件 就是将复杂的页面中重复的部分进行拆分 拆分成一块块可复用的小部分
组件的出现 拆分了Vue实例的代码量 能够以不同的组件来划分不同的功能模块
需要什么样的功能 调用对应的组件即可

组件化和模块化的区别：

• 模块化： 从代码逻辑的角度进行划分的
  方便了代码的分层开发 保证了每个功能模块的职能单一
• 组件化： 从UI界面的角度进行划分的
  使前端页面组件化 将界面拆分成小的部分 方便UI组件的重用

简单来说 组件化使得网页重复的代码内容更加简单 多个重复代码只需要一个即可
页面中需要展示几个 那么就渲染几次

二、创建组件

1、创建全局组件

全局组件 就是代码中所有的Vue实例都可以使用的组件

创建方式一：

使用Vue.extend来创建全局Vue组件 返回组件的模板对象
语法：

Vue.extend({             template:"组件内容" }) 

并使用Vue.component将模板对象注册为一个有名称的组件
语法：

Vue.component("组件名称",Vue.extend创建的组件模板对象) 

例：

<script> // 使用Vue.extend来创建全局Vue组件 返回组件的模板对象 var component1=Vue.extend({      template:"<h3>我是组件</h3>" // 通过template属性 指定组件要展示的HTML结构 }) // 使用Vue.component将模板对象注册为一个有名称的组件 // Vue.component("组件名称",Vue.extend创建的组件模板对象)  Vue.component("myComponent",component1)  Vue.component("mycomponent",component1) var vm=new Vue({     el:'#app',     data:{},     methods:{} }); </script> 

若要使用组件 直接将组件的名称以HTML标签的形式引入到页面中即可

注：组件注册的时候可以用驼峰命名 但在页面上不能用驼峰命名
组件名称若包含大写 那么在页面上须将大写字母转换为小写字母 并用短横杠进行连接
组件名称若不包含大写 那么直接引用即可

<div id="app"> <my-component></my-component> <mycomponent></mycomponent> </div> 

将这两步合并为一步 就是：

Vue.component("myComponent",Vue.extend({             template:"<h3>我是组件</h3>" })) 

Vue.component的第一个参数是组件的名称 在页面中引用组件的时候就是以名称引用的
Vue.component的第二个参数是Vue.extend创建的组件 其中template属性就是组件的HTML内容

创建方式二：

<script>     Vue.component("myComponent",{         template:"<h3>我是组件</h3>" }) var vm=new Vue({        el:'#app',        data:{},        methods:{} }); </script> 

值得注意的是：无论是哪种方式创建的组件 组件的template属性指向的模板内容 必须有且仅有唯一的一个根元素 否则会报错

比如：

Vue.component("myComponent",{             template:"<h3>我是组件</h3><span>111</span>" }) 

如果这么写 会报错
得用一个标签包住 比如这样：

Vue.component("myComponent",{             template:"<div><h3>我是组件</h3><span>111</span></div>" }) 

之后 在页面中的引用方式还是一样
将组件名称引入到页面中即可

<div id="app"> <my-component></my-component> </div> 

创建方式三：

该创建方式的好处是 有代码提示和高亮
该方式抽离了组件的模板结构

这种方式 在template里写组件内容的时候 并不直接写上HTML代码 而是写一个id：

<script>     Vue.component("myComponent",{         template:"#tmpl" // 指定模板内容的id 只能用id 不能用class }) var vm=new Vue({        el:'#app',        data:{},        methods:{} }); </script> 

随后 在被Vue控制的标签外面使用<template>标签来定义组件的HTML模板
该元素内的所有代码都属于模板代码结构

<template id="tmpl"> <!-- 同样要符合组件定义的规则 即：有且仅有唯一的根元素 --> <div> <div><h3>我是组件</h3><span>111</span></div> </div> </template> <div id="app"> <!-- 将组件名称引入到页面中即可 --> <my-component></my-component> </div> 

2、创建私有组件

全局组件能被所有Vue实例使用
私有组件只能被创建的那个Vue实例使用

<script> var vm2=new Vue({                el:'#app2',                data:{},                methods:{},                components:{ // 定义实例内部的私有组件                    login:{                        template:"<h1>私有</h1>" } } }); </script> 

<div id="app2"> <!-- 将组件名称引入到页面中即可 --> <login></login> </div> 

同样 私有组件的HTML代码也可以抽离：

<script> var vm2=new Vue({                el:'#app2',                data:{},                methods:{},                components:{ // 定义实例内部的私有组件                    login:{                        template:"#tmpl2" } } }); </script> 

<template id="tmpl2"> <h1>私有</h1> </template> <div id="app2"> <!-- 将组件名称引入到页面中即可 --> <login></login> </div> 

还有一种简写方式：

直接在components属性里写上组件的引用变量名

<script> // 通过对象字面量的形式定义了一个组件模板对象 var login={         template:"<h1>登录</h1>" }; var vm=new Vue({        el:'#app',        data:{},        methods:{},        components:{         login        } }); </script> 

其中：

components:{         login        } 

默认就相当于：

components:{         login:login        } 

组件名默认变成了和组件的引用变量名一致了
因此 在页面中引用该组件的时候 组件名须注意

<div id="app"> <login></login> </div> 

三、组件中的data和methods

组件内也可以有自己的data
但组件中的data不能是一个对象 必须为一个function 且返回值是一个对象
组件中的data中的数据使用方式和在Vue实例中的data数据使用方式完全一致

<script>     Vue.component("mycomponent",{ // 组件中的data中的数据使用方式和在Vue实例中的data数据使用方式完全一致         template:"<h1>全局组件 - {{msg}}</h1>", // 组件内可以有自己的data // 但组件中的data不能是一个对象 必须为一个function 且返回一个对象         data:function() { return {                 msg:"component data" }; } }) var vm=new Vue({        el:'#app',        data:{},        methods:{} }); </script> 

<div id="app"> <mycomponent></mycomponent> </div> 

必须将data定义为一个返回对象的function的原因是：
若重复渲染了多个相同的组件 可确保每个组件内的data都是其独有的 不被其它组件所共享的

methods的定义方式和data一样 在组件实例中的methods属性里写方法即可

<script>  Vue.component("counter",{              template:"#tmpl",              data:function() { return {count:0}; },              methods:{ increment() { this.count++; } } }) </script> 

<template id=tmpl> <div> <input type="button" value="+1" @click="increment"> <h3>{{count}}</h3> </div> </template> 

四、组件切换

有两种方式可实现组件的切换

1、v-if和v-else实现组件的切换

v-if 代表该参数的值为true时 该组件为显示状态
v-else 代表该参数的值为false时 该组件为显示状态

使用起来也是非常简单：

<script>     Vue.component("login",{         template:"<h3>登录</h3>" })      Vue.component("register",{         template:"<h3>注册</h3>" }) var vm=new Vue({        el:'#app',        data:{            flag:true },        methods:{} }); </script> 

<div id="app"> <a href="" @click.prevent="flag=true">登录</a> <a href="" @click.prevent="flag=false">注册</a> <login v-if="flag"></login> <register v-else="flag"></register> </div> 

但 由于if和else的弊端
其缺陷就是只能控制两个组件之间的切换

Vue还提供了一种方式 可控制多个组件之间的切换：

2、component元素实现组件的切换

Vue提供了<component>元素来展示对应名称的属性
component是一个占位符 :is属性需要指定要展示的组件的名称
简单来说 :is属性的值是哪个组件的名称 那么显示的就是哪个组件
组件名称须用引号进行包裹 以此表明是一个字符串 否则Vue会认为这是一个表达式 然后进行解析

<div id="app"> <a href="" @click.prevent="componentName='login'">登录</a> <a href="" @click.prevent="componentName='register'">注册</a> <!-- Vue提供了component元素来展示对应名称的属性 --> <!-- :is属性需要指定要展示的组件的名称 --> <!-- 组件名称须用引号进行包裹 --> <component :is="componentName"></component> </div> 

<script>     Vue.component("login",{         template:"<h3>登录</h3>" })      Vue.component("register",{         template:"<h3>注册</h3>" }) var vm=new Vue({        el:'#app',        data:{ // :is绑定的组件名称            componentName:'login' },        methods:{} }); </script> 

五、组件切换动画

组件在切换的时候 也可实现动画效果 以提升用户体验

首先 用<transition>标签包裹要添加动画的组件
<transition>是Vue提供的一个组件 可以给元素和组件添加进入/离开过渡

然后 用mode属性设置组件切换的动画模式 out-in代表先出再进入 in-out代表先进入再出

<div id="app"> <a href="" @click.prevent="componentName='login'">登录</a> <a href="" @click.prevent="componentName='register'">注册</a> <!-- 用transition标签进行包裹 --> <!-- 用mode属性设置组件切换的动画模式 out-in代表先出再进入 in-out代表先进入再出 --> <transition mode="out-in"> <component :is="componentName"></component> </transition> </div> 

最后 设置动画样式即可：

<style> .v-enter,     .v-leave-to { opacity:0; transform: translateX(150px); } .v-enter-active,     .v-leave-active { transition: all 0.5s ease; } </style>