vue的组件

• 组件的出现就是为了拆分vue实例中的代码量的，能够以不同的组件来划分不同的功能模块，需要什么样的功能就可以调用相应的模块
• 组件化与模块化的不同：
  模块化是从代码的逻辑的角度进行划分的，方便代码分层开发，保证每个功能模块的职能单一
  组件化是从UI界面的角度进行划分的，前端的组件化方便UI组件的重用

---

创建组件

全局组件

1. 使用Vue.extend来创建全局的vue组件

var com1=Vue.extend({
        template:'<h3>创建组件</h3>'
    })

2. 通过template属性指定了组件要展示的HTML结构
3. Vue.component('组件的名称',创建出来的组件模板对象)

Vue.component('myCom1',com1)

4. 使用组件,直接把组件的名字以HTML标签的形式引入页面中，使用驼峰命名大写字母改小写中间加-，不使用驼峰命名直接使用原名称

<my-com1></my-com1>

5. 不使用中间变量直接创建组件

Vue.component('myCom1',Vue.extend({
        template:'<h3>创建组件</h3>'
    }))

6. 直接使用Vue.component创建组件

 Vue.component('myCom1',{
        template:'<h3>创建组件</h3>'
    })

7. 不论用哪种方式创建出来的组件，组建的template属性指向的模板内容必须有唯一的根元素
8. 在被控制的div外面使用template定义组建的HTML模板结构然后在被控制的div中使用

<mycom3></mycom3>

<template id="tmp1">
        <div>
            <h1>在外部定义组件结构</h1>
            <h2>有代码提示和高亮</h2>
        </div>
    </template>


Vue.component('mycom3',{
        template:'#tmp1'
    })

---

私有组件

1. 定义实例内部私有组件

components:{
                    login:{
                        template:'<h3>私有组件</h3>'
                    }
                }

2. 组件可以有自己的data属性，组建的data和实例中的data不一样，实例中的data可以为一个对象，但组件的data必须是一个方法
3. 组件中的data除了必须为一个方法之外，这个方法内部必须返回一个对象才行，组件中的data使用方式和实例中的data完全一样

components:{
                    login:{
                        template:'<h3>私有组件---{{msg}}</h3>',
                        data:function(){
                            return{
                                msg:'组件中data定义的数据'
                            }
                        }
                    }
                }

---

组件切换

1. v-if ，v-else切换组件，缺陷只能在两个组件之间切换

Vue.component('login',{
        template:'<h3>登录组件</h3>',
        
    })  
    Vue.component('register',{
        template:'<h3>注册组件</h3>',
        
    })

<button @click.prevent="flag=true">登录</button>
<button @click.prevent="flag=false">注册</button>

        <login v-if="flag"></login>
        <register v-else="flag"></register>

2. compon是一个占位符， ：is属性可以用来指定用来指定要展示组件的名称

<button @click="comName='login'">登录</button>
<button @click="comName='register'">注册</button>
<component :is="comName"></component>

data:{  
          comName:'register'
        },

3. 应用切换动画 和mode方式，切换时当组件消失动画完全消失时才会开始组件开始动画

<transition mode="out-in">
<component :is="comName"></component>
</transition>

<style>
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(150px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.5s ease;
        }
        </style>

---

父组件向子组件传值

1. 父组件可以在引用子组件的时候通过属性绑定（v-bind:）的方式，把需要传递给子组件的数据传递到子组件内部供其使用

components:{
                    com1:{
                        template:'<h2>这是子组件----{{parentmsg}}</h2>',
                        props:['parentmsg']
                    }
                }   

        <com1 v-bind:parentmsg='msg'><com1>

2. props把父组件传递过来的parentmsg属性先在props数组中定义才能使用这个数据
3. 父组件向子组件传递方法通过事件绑定（v-on:）的方式

---