Vue组件基础

最新推荐文章于 2023-03-15 14:09:33 发布

友人C君~

最新推荐文章于 2023-03-15 14:09:33 发布

阅读量160

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/CWH0908/article/details/92806261

版权

vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

全局组件

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

});

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

使用：

/*使用属性绑定给组件传入不同的数据*/
<my-component :mypropos="'测试'">

</my-component>

私有组件

var vm=new Vue({

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

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

})

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../../js/Vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<div id="app">
			<a href="#" @click.prevent="setFlagTrue">登录按钮</a>
			<a href="#" @click.prevent="setFlagFalse">注册按钮</a>
			
			<login v-if="flag"></login>
			<resign v-else="flag"></resign>
			
		</div>
		
		<script>

			//登录组件
		Vue.component('login',{
			template:'<h3>登录组件</h3>',//可使用id引入，在外部写template有代码提示
		});
		
			//注册组件
		Vue.component('resign',{
			template:'<h3>注册组件</h3>',//可使用id引入，在外部写template有代码提示
		});
			
		var vm=new Vue({				
			el:"#app",
		  data:{
				flag:false,
		  },
			methods:{
				setFlagTrue:function(){
					this.flag=true;
				},
				setFlagFalse:function(){
					this.flag=false;
				}
			},					
		})
			
	</script>
	</body>
</html>

多组件间的切换（：is）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../../js/Vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<div id="app">
			
			<!--Vue提供的component元素实现多个组件间的切换-->
			<component :is="'test'"></component>
			
			<a href="#" @click.prevent="testName='test1'">切换test1</a>
			<a href="#" @click.prevent="testName='test2'">切换test2</a>		
			<a href="#" @click.prevent="testName='test3'">切换test3</a>	
		
			<component :is="testName"></component>
			
		</div>
		
		<script>

			//测试组件1
		Vue.component('test1',{
			template:'<div>测试组件1</div>',//可使用id引入，在外部写template有代码提示
		});
		
			//测试组件2
		Vue.component('test2',{
			template:'<div>测试组件2</div>',//可使用id引入，在外部写template有代码提示
		});
		
			//测试组件3
		Vue.component('test3',{
			template:'<div>测试组件3</div>',//可使用id引入，在外部写template有代码提示
		});
			
		var vm=new Vue({				
			el:"#app",
		  data:{
				testName:""
		  },				
		})
			
	</script>
	</body>
</html>