这篇内容是关于组件在Vue中的引入和使用；什么是组件以及做组件化的开发，在Vue中，组件是构成页面中独立结构单元，能够减少重复代码的编写，提高开发效率，降低代码耦合度，便于维护和管理；讲起来可能比较文绉绉，举一个简单的例子；

通过以上例子是不是对组件有了新的认识，以及用组件化开发的一些益处！

组件的注册方式：

1）全局注册：Vue.component方法

2）局部注册：Vue实例的components属性

全局注册 – 自定义组件

ps：下面通过全局注册的方式来完成一个自定义组件 “modleA”；Vue.component(“组件名”,{ template : ( 放置组件的DOM结构 ，有对应methods，computed…)})

        Vue.component("modle",{        template:`                            
这就是一个modle组件
                     `    })    new Vue({        el:'#app',data:{}    })

接下来我们可以在组件当中设置一个按钮，点击按钮时反馈输出在控制台上；

        Vue.component("modle",{        template:`                            
这就是一个modle组件
                点击                     `,        methods:{            handleClick(){                console.log('触发组件当中的handleClick事件！')            }        }    })    new Vue({ el:'#app'})

组件当中还有其他的，比如 watch，computed…都可以来使用；那么在项目中如何来运用组件，复用等会在后面做项目演示的时候进行一个讲解；这里如果去当前页面测试复用，我们只需要编写组件名称作为标签即可。

以上就是全局注册组件的引入和使用；下面来讲局部注册组件的引入和使用！

局部注册- 自定义组件

在原来的modle组件当中我们来用这个components属性对child组件进行局部注册；

    Vue.component("modle",{        components:{           "child":{                template:`                                            
这就是一个child组件
                        点击                                       `,                methods:{                    handleClick(){                        console.log('触发组件当中的handleClick事件！')                    }                }            }        },        template:`                            
这就是一个modle组件
                点击                                     `,        methods:{            handleClick(){                console.log('触发组件当中的handleClick事件！')            }        }    })    new Vue({el:'#app'})

页面效果：

那么child这个组件只能被当前的modle访问到，而其他组件访问不到；进行测试一下，写一个全局组件modles看能否访问到局部组件child；

        ...Vue.component("modles",{        template:`                    
modles组件
                    `    })

以上内容就是讲全局和局部注册自定义组件的内容，下面讲组件当中注意的点或者你可能遇到的问题，完后进行小结一下有关组件的一些内容；

组件名称

在编写组件起名称的时候当然是希望能更贴近内容本身，如我们要做一个底部进行复用可以是tabbar，导航可以navbar等之类的，那么当我们起以下的名称就需要注意一些问题了，下面来看一下；

        Vue.component("moduleA",{        template:`             moduleA组件         `    })    new Vue({el:'#app'})

运行一下，会发现这样的一个错误 Unknown custom element: – did you register the component correctly” />

这里就是命名的方式写法不对，名字是 “驼峰式” 的，那么在html代码编写不能写为 ，应该写成的写法，下面我们修改运行一下：

自定义组件data必须是一个函数

自定义组件当中这个methods、computed和watch与正常的写法并无二样，唯独这个data，为什么自定义组件当中的data必须是一个函数呢？下面用一个简单的例子：

    Vue.component("moduleA",{        template:`             moduleA组件 - name：{{name}}         `,        data(){            return{                name:'sy'            }        }    })    new Vue({el:'#app',data:{}})

如果现在我写成这个data是一个对象而不是一个函数的话，会是怎么样呢？报错

...// data(){//     return{//         name:'sy'//     }// }data:{    name:'sy'}...

这里能发现data不是这样data:{}，而是data(){return{}}，数据以一个函数的返回值的形式，下面小结为什么自定义组件data必须是一个函数？

组件的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一分新的data，让各个组件实例维护各自的数据，互不干扰；如果单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果；

小结

下面来对这篇内容的一些东西进行一个小结以及所遇的问题；

1. 组件起名称：js(script)中编写驼峰式，则html需要用连接符 -2. 组件中编写DOM结构时：没有代码的高亮显示（解决：通过vue单文件组件解决）3. 组件中编写DOM时用到css：只能写行内样式（解决：通过vue单文件组件解决）4. template(模板)：包含一个根节点（ps：将内容包裹起来）5. 组件是孤岛，无法（直接）访问外边其他组件的状态或者方式（解决：间接的组件通信）6. 自定义组件data必须是一个函数7. 所有的组件写在同一个页面，代码很乱（解决：通过vue单文件组件解决）补充：    刚接触组件编写template模板中DOM结构会发现没有代码的提示,完全需要自己手敲，虽然用起来好用,但觉得不方便，这个在后面做项目的时候是通过vue单文件组件可以解决的，所以这些问题都在后续有其他的变化；    使用组件可以进行引入使用,也使得组件像一座孤岛,那么组件与组件之间不能直接访问状态和方法，那么就需要通过组件与组件之间间接通信完成；    可以回顾以上代码编写下来,script中编写的组件代码(Vue.component)内容还是蛮多的,如果还有其他的,那么这些代码和new Vue()中的代码混合会使整体代码很混乱,虽然解决了代码的耦合,但这些问题都能够得以解决；

本篇内容就讲解了Vue组件的引入和基本使用以及一些组件相关的知识点，接下来就来讲解相关组件的一些通信方式！感谢大家的观看，支持一下！