组件的概念

组件相当于积木玩具，许许多多不同的积木就可以拼装成汽车，城堡，动物等等各种各样的玩具模型，因此不同的组件相互组合起来就可以产生一个组合模板。在网页开发中非常实用。

注册基本组件

组件也分为全局组件和局部组件。

全局组件

    
    
     
    
    Vue.component('mycomponent',{	template : '
    
     这是一个自定义组件
    
'});复制代码

在Vue中通过component()来定义组件，第一个参数为组件名称，第二个为组件对象，其中包含了data,templat等对象。

局部组件

顾名思义，局部组件只能在Vue实例中的使用，通过new Vue中的components对象来实现：

new Vue({    el : '#app',    data : {},    methods : {},    components : {        home : {            template : '
    
     这是局部组件
    
'        }    },});复制代码

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  |  
    
     这是局部组件
    
    
   |                   ^^^^^^^^^^^found in---> 
           
     
      复制代码
     
    

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属性才能正常使用。

    
复制代码

组件的交配

在实际开发中组件之间的配合使用时必然的，因此父组件需要给子组件发数据，子组件也需要将自己发生的事件传递给父组件，在开发中，我们定义模块除了更好的对代码分块，利于阅读和维护外，还能减少一些代码的重复，来达到复用。因此，组件里面的数据就需要我们开发者自己传递进去。

传递数据给组件，实现组件的复用性

在组件传递参数中，我们可以使用props来传递参数，

1.定义一个组件模板：

        
    复制代码

2.绑定组件

components : {    fucp : {        template : '#fucomponent',            //传递参数            props: ["str","str1"],                data () {                return {                }            }    },}复制代码

3.使用组件，并且传递参数

    复制代码

prop的参数类型

在传递数中prop是可以规定参数的类型的，需要将props转换成对象的形式

props : {    text : String,}复制代码

子组件传递给父组件

自组件传递给父组件可以使用on的方式进行沟通

1.创建子组件

    复制代码

2.创建父组件

    复制代码

实例：