组件初识

1、组件的概念

对一段前端UI界面的抽象。从UI界面的角度出发，把之前界面按照功能拆分成一个个组件，方便重用。

2、使用组件的好处

1、可复用，定义一次，可以多次调用

2、提高代码的可维护性

3、高内聚、 低耦合

3、模块化和组件化的区别

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一

组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

4、组件的定义与声明

　　1、通过Vue.extend定义组件，通过Vue.component('组件名',组件配置)全局声明组件

<div id='app'>
        <login></login>
    </div>
    <script>
     const login=Vue.extend({
         template:`<div>登录组件</div>`,
     })  
     Vue.component('login',login) 
    const vm = new Vue({
        el: '#app',
        data: {
        }
    })
    </script>

　　2、通过对象方式定义组件，通过Vue里components的属性对组件进行私有声明（key 组件名字，value 组件的配置）

 <div id='app'>
        <login></login>
        <user-info></user-info>
    </div>
    <script>
        const login = {
            template: `<div>登录组件</div>`,
        }const vm = new Vue({
            el: '#app',
            data: {
            },
            components:{
                login,
                userInfo:{
                    template:`<div>用户信息</div>`
                }
            }
        })
    </script>

5、组件的使用方法

1、当成标签的方式去使用

2、当名字是驼峰命名的时候，转成-连接