【Vue框架】Vue2中组件之三种创建全局组件方式、创建私有组件、区分父组件向子组件传值、动画组件、传方法与子组件向父组件传值（附源码）

最新推荐文章于 2024-01-31 15:00:44 发布

量化Mike

最新推荐文章于 2024-01-31 15:00:44 发布

阅读量768

点赞数 1

分类专栏： NodeJs 文章标签： vue.js javascript 前端组件 Vue

本文链接：https://blog.csdn.net/weixin_43529465/article/details/129910100

版权

NodeJs 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章目录

1.1 创建全局组件

第一种：创建全局组件-Vue.extend
第二种：创建全局组件-直接使用Vue.component进行创建
第三种：引入自定义组件（常用）

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="../css/animation.css"/>
		<style>
			.div{width: 100px; height: 100px;background: red;}
		</style>
	</head>

	<body>
		<div id="app">
			<mycom1></mycom1>
			<mycom2></mycom2>
			<my-com3></my-com3>
			<mycom4></mycom4>
		</div>
		
		<template id="com4">
			<div>
				<h1>全局组件4</h1>
			</div>
		</template>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			
			// 1、第一种:创建全局组件-Vue.extend
			//    先定义组件,然后再用 Vue.component 进行创建
			var com1 = Vue.extend({
				template:'<h1>全局组件1</h1>'
			})
			Vue.component('mycom1',com1)
			
			//---------------------------------------------------
			// 2、第二种:创建全局组件
			//    直接使用Vue.component进行创建
			Vue.component('mycom2', {
				template:'<h1>全局组件2</h1>'
			})
			//    定义的名称mycom2如果为驼峰命名myCom2,创建时写成<my-com2></my-com2>
			Vue.component('myCom3', {
				template:'<h1>全局组件3</h1>'
			})
			
			//---------------------------------------------------
			// 3、第三种:引入自定义组件
			Vue.component('mycom4', {
				template:'#com4'
			})
			
			var vm = new Vue({
				el: '#app',
				data: {
					id:'',
					name:'',
					age:'',
					list:[
						{id:1,name:'小米',age:18},
						{id:2,name:'小明',age:28},
						{id:3,name:'小宜',age:38}
					]
				},
				methods:{
					btn(){
						var newobj = {id:this.id,name:this.name,age:this.age}
						this.list.push(newobj);
					}
				},
			})
		</script>
	</body>
</html>

1.2 创建私有组件

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="../css/animation.css"/>
		<style>
			.div{width: 100px; height: 100px;background: red;}
		</style>
	</head>

	<body>
		<div id="app">
			<mycom1></mycom1>
			<mycom2></mycom2>
			<mycom3></mycom3>
		</div>
		
		<template id="com2">
			<div>
				<h1>私有组件2</h1>
			</div>
		</template>
		
		<template id="com3">
			<div>
				<h1>私有组件3</h1>
			</div>
		</template>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var mycom3 = {
				template: '#com3'
			}
			
			var vm = new Vue({
				el: '#app',
				data: {
				},
				methods:{
				},
				components:{
					// 1、私有组件创建方式1
					mycom1:{
						template:'<h1>私有组件1</h1>'
					},
					// 2、私有组件创建方式2
					mycom2:{
						template:'#com2'
					},
					// 3、私有组件创建方式3
					mycom3
				}
			})
		</script>
	</body>
</html>

1.3 组件中的data和methods

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="../css/animation.css"/>
		<style>
			.div{width: 100px; height: 100px;background: red;}

		</style>
	</head>

	<body>
		<div id="app">
			<mycom1></mycom1>
		</div>

		<template id="com1">
			<div>
				<h1>私有组件2=={{msg}}</h1>
				<button @click="show">点击</button>
			</div>
		</template>
		
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			
			// 组件中的data和method属性
			var mycom1 = {
				template: '#com1',
				data(){
					return{
						msg:'Hello Vue'
					}
				},
				methods:{
					show(){
						console.log('Hello World')
					}
				},
				created(){
					this.show();
				}
			}
			
			
			var vm = new Vue({
				el: '#app',
				data: {
					
				},
				methods:{
					
				},
				components:{
					mycom1
				}
			})
			
			
		</script>
	</body>
</html>

1.4 组件选项卡切换案例

单一选项卡

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="../css/animation.css"/>
		<style>
			.div{width: 100px; height: 100px;background: red;}
			
		</style>
	</head>

	<body>
		<div id="app">
			<a @click="btn(0)">登录</a>
			<a @click="btn(1)">注册</a>
			<login v-if="flag"></login>
			<register v-else></register>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var login = {
				template:'<h1>登录</h1>'
			}
			
			var register = {
				template:'<h1>注册</h1>'
			}
			
			var vm = new Vue({
				el: '#app',
				data: {
					flag:true
				},
				methods:{
					btn(i){
						if(i==0){
							this.flag = true
						}else{
							this.flag = false
						}
					}
				},
				components:{
					login,
					register
				}
			})
		</script>
	</body>
</html>

多组件选项卡

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="../css/animation.css"/>
		<style>
			.div{width: 100px; height: 100px;background: red;}
			
		</style>
	</head>

	<body>
		<div id="app">
			<!-- 
				这里引入组件的名称需要加上单引号,
				如果没有加单引号会去data中寻找变量
			 -->
			<component :is="'home'"></component>
			
			<a @click="tab('login')">登录</a>
			<a @click="tab('register')">注册</a>
			<a @click="tab('home')">首页</a>
			<component :is="comName"></component>
			
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var login = {
				template:'<h1>登录</h1>'
			}
			
			var register = {
				template:'<h1>注册</h1>'
			}
			
			var home = {
				template:'<h1>Home</h1>'
			}
			
			var vm = new Vue({
				el: '#app',
				data: {
					flag:true,
					comName:'home'
				},
				methods:{
					tab(i){
						this.comName = i;
					}
				},
				components:{
					login,
					register,
					home
				}
			})
		</script>
	</body>
</html>

1.5 动画组件

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="../css/animation.css"/>
		<style>
			.div{width: 100px; height: 100px;background: red;}
			
			.v-enter,
			.v-leave-to{
				opacity: 0;
				transform: translateX(100px);
			}
			
			.v-enter-active,
			.v-leave-active{
				transition:all 1s ease;
			}
			
		</style>
	</head>

	<body>
		<div id="app">
			<a @click="tab('login')">登录</a>
			<a @click="tab('register')">注册</a>
			<a @click="tab('home')">首页</a>
			
			<!-- mode属性设置 out-in
				组件先离开后进入
			 -->
			<transition name="" mode="out-in">
				<component :is="comName"></component>
			</transition>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var login = {
				template:'<h1>登录</h1>'
			}
			
			var register = {
				template:'<h1>注册</h1>'
			}
			
			var home = {
				template:'<h1>Home</h1>'
			}
			
			var vm = new Vue({
				el: '#app',
				data: {
					flag:true,
					comName:'home'
				},
				methods:{
					tab(i){
						this.comName = i;
					}
				},
				components:{
					login,
					register,
					home
				}
			})
		</script>
	</body>
</html>

1.6 父组件向子组件传值

props:[‘sendmsg’]
props:{}

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="../css/animation.css"/>
		<style>
			.div{width: 100px; height: 100px;background: red;}

		</style>
	</head>

	<body>
		<div id="app">
			<!-- 
				父组件向子组件传递值
				1、这里可以将mycom1看作子组件
				2、将vm看作是父组件
			 -->
			<mycom1 :sendmsg="msg"></mycom1>
		</div>
		
		<!-- 视图层 -->
		<template id="com1">
			<div>
				<h1>子组件1 == {{sendmsg}}</h1>
			</div>
		</template>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var mycom1 = {
				template:'#com1',
				
				// 方式1
				// props:['sendmsg'],
				
				// 方式2
				props:{
					sendmsg:{
						type:String
					}
				}
			}
			
			var vm = new Vue({
				el: '#app',
				data: {
					msg:'父组件中的msg'
				},
				methods:{
					
				},
				components:{
					mycom1
				}
			})
		</script>
	</body>
</html>

1.7 父组件向子组件传递方法

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="../css/animation.css"/>
		<style>
			.div{width: 100px; height: 100px;background: red;}
		</style>
	</head>

	<body>
		<div id="app">
			<!-- 
				父组件向子组件传传递方法
			 -->
			<mycom1 :sendmsg="msg" @sendfn="show"></mycom1>
		</div>
		
		<!-- 视图层 -->
		<template id="com1">
			<div>
				<h1>子组件1 == {{sendmsg}}</h1>
				<button @click="btn">点击</button>
			</div>
		</template>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			// 子组件属性与方法
			var mycom1 = {
				template:'#com1',
				
				// 方式1
				// props:['sendmsg'],
				
				// 方式2
				props:{
					sendmsg:{
						type:String
					}
				},
				
				methods:{
					btn(){
						this.$emit('sendfn')
					}
				}
			}
			
			// 主组件属性与方法
			var vm = new Vue({
				el: '#app',
				data: {
					msg:'父组件中的msg'
				},
				methods:{
					show(){
						console.log('Hello World');
					}
				},
				components:{
					mycom1,
				}
			})
		</script>
	</body>
</html>

1.8 子组件向父组件传值

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="../css/animation.css"/>
		<style>
			.div{width: 100px; height: 100px;background: red;}
		</style>
	</head>

	<body>
		<div id="app">
			<!-- 
				子组件向父组件传递值
			 -->
			<mycom1 :sendmsg="msg" @sendfn="show"></mycom1>
			
			<ul>
				<li v-for="(item,i) in newlist" :key="i">
					{{item.id}}=={{item.name}}
				</li>
			</ul>
		</div>
		
		<!-- 视图层 -->
		<template id="com1">
			<div>
				<h1>子组件1 == {{sendmsg}}</h1>
				<button @click="btn">点击</button>
			</div>
		</template>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var mycom1 = {
				template:'#com1',
				
				// 方式1
				// props:['sendmsg'],
				
				// 方式2
				props:{
					sendmsg:{
						type:String
					}
				},
				data(){
					return{
						newmsg:'----子组件中的msg',
						list:[
							{id:1,name:'小米'},
							{id:2,name:'小王'},
							{id:3,name:'小宋'}
						]
					}
				},
				methods:{
					btn(){
						// 1、this.$emit方法
						// 参数1:自定义方法名字
						// 参数2:传入的参数不限制个数
						// this.$emit('sendfn', this.newmsg, 123);
						
						this.$emit('sendfn', this.list);
					}
				}
			}
			
			
			var vm = new Vue({
				el: '#app',
				data: {
					msg:'---父组件中的msg',
					newlist:[]
				},
				methods:{
					show1(data, data1){
						console.log('Hello World'+ data + data1);
					},
					show(data){
						this.newlist = data;
					}
				},
				components:{
					mycom1,
				}
			})
		</script>
	</body>
</html>

1.9 Vue获取DOM元素的方法（ref）

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="../css/animation.css"/>
	</head>

	<body>
		<div id="app">
			<!-- 
				1、ref属性
				1.1 可以操作Dom元素
				1.2 可以操作组件中的数据和方法
			 -->
			<h1 ref="h1text">Hello</h1>
			<button @click="btn">点击</button>
			
			<mycom1 ref="mycom1"></mycom1>
			
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			
			//定义组件
			var mycom1 = {
				template:'<h1>mycom1组件</h1>',
				data(){
					return{
						msg:'hello Vue'
					}
				},
				methods:{
					show(){
						console.log(123);
					}
				}
			}
			
			var vm = new Vue({
				el: '#app',
				data: {
					
				},
				methods:{
					btn(){
						console.log(this.$refs.h1text.innerText);
						console.log(this.$refs.mycom1.msg);
						
						this.$refs.mycom1.show();
					}
				},
				components:{
					mycom1,
				}
			})
			
		</script>
	</body>
</html>

量化Mike

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
【Vue框架】Vue2中组件之三种创建全局组件方式、创建私有组件、区分父组件向子组件传值、动画组件、传方法与子组件向父组件传值（附源码）

文章目录1.1 创建全局组件1.2 创建私有组件1.3 组件中的data和methods1.4 组件选项卡切换案例1.5 动画组件1.6 父组件向子组件传值1.7 父组件向子组件传递方法1.8 子组件向父组件传值1.9 Vue获取DOM元素的方法（ref）1.1 创建全局组件第一种：创建全局组件-Vue.extend第二种：创建全局组件-直接使用Vue.component进行创建第三种：引入自定义组件（常用）<!DOCTYPE html><html lang="en"&gt
复制链接

扫一扫