Vue学习之旅Part8：Vue全局组件和私有组件的创建及组件切换动画

一、概念

什么是组件：

组件 就是将复杂的页面中重复的部分进行拆分 拆分成一块块可复用的小部分
组件的出现 拆分了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">