vue组件的创建切换与传值

vue的组件

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

---

创建组件

全局组件

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

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

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

Vue.component('myCom1',com1)

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

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

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

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

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

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

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

---

私有组件

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

components:{
                    login:{
                        template:'
私有组件
'
                    }
                }

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

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

---

组件切换

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

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

登录
注册

        
        

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

登录
注册

data:{  
          comName:'register'
        },

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

---

父组件向子组件传值

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

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

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

---