Vue组件基础

• 全局组件

Vue.component('myComponent',{//组件名使用驼峰命名，在使用组件时需将大写字母转成"-"＋小写字母的形式
    
    data:function(){
        return {//return一个对象，确保全局组件的每个实例有自己的数据
            value1:"",
            value2:"" 
        }
    },
    methods:{
        methods1:function(){},
        methods2:function(){}
    },
    props:["mypropos"],//自定义组件属性，属性过多时可接收一个参数对象，在template中可使用该对象的属性
    template："
我是全局组件，我的自定义属性有{{mypropos}}
"//组件模板，里面可使用自定义属性，若自定义属性为对象时，可用点语法访问对象的属性

});

var vm=new Vue({
    el:"#app",
})

使用： 

/*使用属性绑定给组件传入不同的数据*/

 

• 私有组件

var vm=new Vue({

    el:"#app",
    data:{
    
    },
    methods:{

    },
    component:{//定义私有组件
        'myComponent1':{
           data:function(){
               return {//return一个对象，确保全局组件的每个实例有自己的数据
                   value1:"",
                   value2:"" 
               }
            },
           template："
我是私有组件1
"
        },
        'myComponent2':{
            data:function(){
                return {//return一个对象，确保全局组件的每个实例有自己的数据
                    value1:"",
                    value2:"" 
                }
            },
            template："
我是私有组件2
"
        },
    }

})

 

• 两个组件间的切换（flag控制）

	
		
		
		
	
	
		
		

			登录按钮
			注册按钮
			
			
			
			
		
		
		
	

 

• 多组件间的切换（：is）

	
		
		
		
	
	
		
		

			
			
			
			
			切换test1
			切换test2		
			切换test3