Vue-组件（一）

什么是组件？

Web开发中组件其实就是页面组成的一部分，好比是电脑中的每一个元件（硬盘、键盘、鼠标），它是一个具有独立的逻辑和功能及界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用。

页面就是由一个个类似这样的部分组成的，比如导航、列表、弹窗、下拉菜单等。页面只不过是这些组件的容器，组件自由组合形成功能完整的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行。

前端组件化的核心思路就是将一个巨大复杂的东西拆分成一个个合理的小东西。

使用组件有什么好处？

提高开发效率

方便复用

简化调试步骤

提升整个项目的可维护性

便于协同开发

组件的特性

重用性

可定制性 --可设置参数和属性

互操作性 --多组件协同工作

高内聚，组件功能必须是完整的；

低耦合，代码独立不会和项目中其他代码发生冲突；

每一个组件都有自己清晰的职责，完整的功能，较低的耦合便于单元测试和重复利用；

Vue中的组件？

Vue中的组件是一个自定义标签，Vue.js的编译器为它添加了特殊的功能；

组件注册？

全局注册，可以在任意模板中使用，使用之前要先注册；

Vue.component('custom-select', {

    template:'<div></div>'

})

局部注册，在组件实例中通过选项对象注册，只在所注册的作用域，实例中使用；使用场景：一个页面可以创建 多个Vue实例，只能在当前挂载点管理的作用域中使用

new Vue({

    el: '#app',

    components: {

    'custom-select': {

    template:'<div></div>'

        }

    }

})

命名：

驼峰（camelCase）和烤串（kebab-case）

组件在注册之后，便可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用。要确保在初始化根实例之前注册了组件