Vue可以进行组件化开发，组件就是Vue的基本结构单元，开发过程中使用起来非常方便灵活，只需要按照Vue规范定义组件，将组件渲染到页面即可。
组件能实现复杂的页面结构，提高代码的可复用性。
1.什么是组件
在Vue中，组件是构成页面中独立结构单元，能够减少重复代码的编写，提高开发效率，降低代码之间的耦合程度，使项目更易维护和管理。
组件主要以页面结构的形式存在，不同组件也具有基本交互功能，根据业务逻辑实现复杂的项目功能。
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component(
'my-component', {
data() {
return {
count: 0
}
},
template: '<button v-on:click="count++">被点击{{count}}次</button>'
}
)
var vm = new Vue({el:'#app'})
</script>2.局部注册组件
Vue.component()方法用于全局注册组件，除了全局注册组件外，还可以局部注册组件，即通过Vue实例的components属性来实现。
<div id="app">
<mycpm></mycpm>
</div>
<script>
var com1 = {
template:'<p>这是vm实例中的局部组件</p>'
}
var vm = new Vue({
el:'#app',
components:{mycpm:com1}
})
</script>3.template模板
在上面的注册组件中，template模板是用字符串保存的，这种方式不仅容易出错，也不适合编写复杂的页面结构。
实际上，模板代码是可以写在HTML结构中的，这样就有利于在编辑器中显示代码提示和高亮显示，不仅改善了开发体验，也提高了开发效率。
Vue提供了<template>标签来定义结构的模板，可以在该标签中书写HTML代码，然后通过id值绑定到组件内的template属性上。
<div id="app">
<my-component></my-component>
</div>
<template id="tmp1">
<p>{{title}}</p>
</template>
<script>
Vue.component('my-component',{
template:'#tmp1',
data(){
return{
title:'组件的titele'
}
}
})
var vm = new Vue({
el:'#app',
data:{
title:'vm实例的title'
}
})
</script>4.组件之间的数据传递
在Vue中，组件实例具有局部作用域，组件之间的数据传递需要借助一些工具来实现父组件向子组件传递数据信息。
父组件和子组件的依赖关系是完成数据传递的基础，组件之间数据信息传递的过程为父组件向子组件传递是数据从外部向内部传递，子组件向父组件传递是数据从内部向外部传递
在Vue中，数据传递主要通过props属性和$emit方式来实现
4.1.props传值
props即道具，用来接受父组件中定义的数据，其值为数组，数组中是父组件传递的数据信息。
需要注意的是，props是以从上到下的单向数据流传递，且父级组件的props更新会向下流动到子组件下，但是反过来则不行。
<div id="app">
<my-parent name="title"></my-parent>
</div>
<script>
Vue.component('my-parent',{
props:['name'],
template:'<div>我是父组件{{name}}</div>'
})
var vm = new Vue({el:'#app'})
</script>4.2.$emit传值
$emit能够将子组件中的值传递到父组件中去。$emit可以触发父组件中定义的事件，子组件的数据信息通过传递参数的方式完成。
<div id="app">
<parent></parent>
</div>
<template id="child">
<div>
<button @click="click">Send</button>
<input type="text" v-model="message">
</div>
</template>
<script>
Vue.component('parent', {
template: '<div><child @childfn="transContent"></child>' + '子组件传来的值:{{message}}</div>',
data() {
return {
message: ''
}
},
methods: {
transContent(payload) {
this.message = payload
}
}
})
//child组件
Vue.component('child', {
template: '#child',
data() {
return {
message: '子组件的消息'
}
},
methods: {
click() {
this.$emit('childfn', this.message);
}
}
})
var vm = new Vue({el:'#app'})
</script>5.组件切换
Vue中的页面结构是由组件构成的，不同组件可以表示不同页面，适合进行单页应用开发。
组件的切换是通过v-if来控制的
除了这种方法还可以通过组件的is属性来实现，使用is属性匹配组件的名称
5.1 v-if指令
<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 ></register>
</div>
<script>
Vue.component('login',{
template:'<div>登录页面</div>'
})
Vue.component('register',{
template:'<div>注册页面</div>'
})
var vm = new Vue({
el:'#app',
data:{
flag:true
}
})
</script>5.2组件的is属性
<div id="app">
<a href="#" @click.prevent="comname='login'">登录</a>
<a href="#" @click.Prevent="comname='register'">注册</a>
<component v-bind:is="comname"></component>
</div>
<script>
Vue.component('login', {
template: '<div>登录页面</div>'
})
Vue.component('register', {
template: '<div>注册页面</div>'
})
var vm = new Vue({
el: '#app',
data: {
comname: ''
}
})
</script>