什么是组件：
组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可
模块化和组件化的区别
模块化：是从代码逻辑的角度进行划分的，方便代码分层开发，保证每个功能模块的职能单一
组件化：是从UI界面的角度进行划分的，前端的组件化，方便UI组件的重用
一、创建组件的三个方式
1.使用vue.extend来创建全局的Vue组件
<body>
<!--如果想要使用组件，直接把组件的名称，以html便签的形式引入到页面中即可-->
<my-com1></my-com1>
</body>
<script>
//使用vue.extend来创建全局的vue组件
var com1=Vue.extend({
template:'<h3>这是使用vue.extend 创建的组件</h3>' //通过template 属性制定了组件要展示的html结构
})
//使用vue.component('组件的名称',创建出来的组件模板名称)
//注意：组件在注册的时候可以用驼峰，但是在body中使用的时候，不能使用驼峰，需要吧大小写用 - 拆开
Vue.component('myCom1',com1)
//创建 vue实例 得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
<script>
2.第二种创建组件的方式：
<script>
Vue.component('mycom2',{template:'<div>第二种方式创建的组件</div>})
var vm=new Vue({
el:'#app',
data:{},
methods:[],
})
</script>
3.定义私有的内部组件：
<script>
Vue.component('mycom3',{
template:'#temp1'})
var vm=new Vue({
el:'#app',
data:[],
methods:[],
filters:[],
directives:[],
components:{
//定义思雨的内部组件
login:{
template:'<h1>这是私有的login组件</h1>
}
}
})
</script>
组件可以有自己的data数据，组件的data和vue实例的data不一样，实例中的data可以作为一个对象，但是组件中的data必须是一个方法，而且还必须要有返回值
解释例子：
Vue.component('mycom1',{
template:'<h1>这是全局组件</h1>',
data:function(){
return{
a1:'122',
a2:'344',
}
}
})
二、组件的切换
上面创建了组件之后，我们经常会用于组件之间的动态切换两个组件之间的切换：
看下面的例子
<body>
<div id="app">
<a href="" @click.prevent="flag=true">登录</a>
<a href="" @click.prevent="flag=false">注册</a>
<login v-if="flag></login> //当flag为true时 login显示否则隐藏
<register v-else=“flag”></register>
script>
Vue.component('login', {
template: '<h3>登录组件</h3>'
})
Vue.component('register', {
template: '<h3>注册组件2</h3>'
})
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {}
});
</script>
</div>
</body>
结果：
上面的这个例子是两个组件之间的互相切换，但是如果出现了多个组件，那如何切换？
多个组件的切换：
关键点： vue提供了 component 来展示对应名称的组件：
例子：
<div>
//当点击注册的时候 变量comName的值为login
<a href="" @click.prevent="comName='login'">登录</a>
//当点击注册的时候 变量comName的值为register
<a href="" @click.prevent="comName="register'">注册</a>
<!--vue 提供了 component，来展示对应名称的组件-->
<!--component 是一个占位符, :is 属性 可以用来制定要展示的组件的名称-->
<component is="comName></component>
</div>
<script>
//组件名称 是 字符串
Vue.component('login', {
template: '<h3>登录组件</h3>'
})
Vue.component('register', {
template: '<h3>注册组件</h3>'
})
var vm = new Vue({
el: '#app',
data: {
comName: ''
},
methods: {}
});
</script>
这样我们就可以通过 component 来切换多个组件
