Vue学习：组件学习

一、什么是组件

　　组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可； 组件化和模块化的不同：

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

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

二、组件的创建

• 创建方式1

var test_yk = Vue.extend({
      template: '
创建组件
'
    });
    Vue.component('testYk', test_yk );

• 方式2

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

• 方式3

    
    Vue.component('testYk', Vue.extend({
            template: '#test'
        }));

　渲染：

•  创建私有组件

    

        
    
    


        var vm = new Vue({
            el: '#app1',
            data: {
            },
            methods: {
            },
            // 定义实例内部私有组件的
            components: { 
                test: {
                    template: '#yk1'
                }
            }
        })

三、组件中的data

 

四、使用components属性定义局部子组件

五、组件的切换

• 使用component实现组件的切换

    

        
        登录
        注册

        
    
    

• 使用v-if和v-else实现组件的切换

    

        登录
        注册
        
        
    
 
    

 　

这里需要加上.prevent，防止预设行为，不然切换到注册的一瞬间就又切换回来了。

六、父子组件的传值

•  父组件传值给子组件

• 父组件传方法给子组件

• 子组件传值给父组件（子组件需要使用父组件的方法传值）

七、使用ref获取组件和DOM元素

　　vue不推荐直接操作dom元素 

    

        
        
 学习使用ref获取组件和DOM元素
        

        
        
    
    

　　

 

 

 

转载于:https://www.cnblogs.com/yangk1996/p/10844970.html