组件的概念
组件相当于积木玩具，许许多多不同的积木就可以拼装成汽车，城堡，动物等等各种各样的玩具模型，因此不同的组件相互组合起来就可以产生一个组合模板。在网页开发中非常实用。
注册基本组件
组件也分为全局组件和局部组件。
全局组件
<div id="app">
<mycomponent></mycomponent>
</div>
<!-- js -->
Vue.component('mycomponent',{
template : '<div>这是一个自定义组件</div>'
});
在Vue中通过component()来定义组件，第一个参数为组件名称，第二个为组件对象，其中包含了data,templat等对象。
局部组件
顾名思义，局部组件只能在Vue实例中的使用，通过new Vue中的components对象来实现：
new Vue({
el : '#app',
data : {},
methods : {},
components : {
home : {
template : '<div>这是局部组件</div>'
}
},
});
template模板的要求
1.模板下只能拥有一个根元素，如果多出来，会报错以下信息
[Vue warn]: Error compiling template:
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
1 | <div>这是局部组件</div><div></div>
| ^^^^^^^^^^^
found in
---> <Home>
<Root>
2.组件中的data和el必须是一个函数，通过返回值，为什么是函数形式呢？主要还是因为像Vue那样传递的话，会造成当一个组件中的某个值修改的时候，所有值都被修改了。
3.在HTML中，组件可能会受到一些限制，比如在表格中，如果使用自定义组件的话，它会被认为是无效的内容。下面列出一些常见会出现问题的标签：
- a 不能包含其它的交互元素（如按钮，链接）
- ul 和 ol 只能直接包含 li
- select 只能包含 option 和 optgroup
- table 只能直接包含 thead, tbody, tfoot, tr, caption, col, colgroup
- tr 只能直接包含 th 和 td
因此，我们需要使用is属性才能正常使用。
<table>
<tr is="mycomponent"></tr>
</table>
组件的交配
在实际开发中组件之间的配合使用时必然的，因此父组件需要给子组件发数据，子组件也需要将自己发生的事件传递给父组件，在开发中，我们定义模块除了更好的对代码分块，利于阅读和维护外，还能减少一些代码的重复，来达到复用。因此，组件里面的数据就需要我们开发者自己传递进去。
传递数据给组件，实现组件的复用性
在组件传递参数中，我们可以使用props来传递参数，
1.定义一个组件模板：
<!-- 组件模板的定义 -->
<template id="fucomponent">
<div>
文本是：{{str}}
</div>
</template>
2.绑定组件
components : {
fucp : {
template : '#fucomponent',
//传递参数
props: ["str","str1"],
data () {
return {
}
}
},
}
3.使用组件，并且传递参数
<fucp str = '我是props传递的参数'></fucp>
prop的参数类型
在传递数中prop是可以规定参数的类型的，需要将props转换成对象的形式
props : {
text : String,
}
子组件传递给父组件
自组件传递给父组件可以使用on的方式进行沟通
1.创建子组件
<template>
<div>
<!-- 开始定义组件 -->
<button @click="postSj">上传子组件信息</button>
</div>
</template>
<script>
export default{
name : 'child',
methods: {
postSj : function (){
this.$emit('getmsg','我是子组件传递过来的组件');
}
}
}
</script>
<style>
</style>
2.创建父组件
<template>
<div class="hello">
<h4>parent</h4>
<h5>title的值:{{title}}</h5>
<child @getmsg='getmsg'></child>
</div>
</template>
<script>
import child from './child'
export default {
name: 'HelloWorld',
data () {
return {
title : ''
}
},
methods : {
getmsg(res){
this.title = res;
}
},
components: {
child
},
}
</script>
实例：
fuzistoke.png
