简述vue.js组件通信

最新推荐文章于 2024-06-16 12:11:30 发布

路漫漫，其修远

最新推荐文章于 2024-06-16 12:11:30 发布

阅读量120

点赞数 2

分类专栏：笔记文章标签： vue.js javascript html vue

本文链接：https://blog.csdn.net/weixin_42281179/article/details/105206112

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue父子组件通信

组件通信之子传父

使用模板标签建立模板

<!-- 使用模板标签定义模板 -->
<template id="tm">
	<div>
		<table border="0" cellspacing="0" cellpadding="5">
			<thead>
				<caption>{{title}}</caption>
				<tr>
					<th></th>
					<th>客户编号</th>
					<th>客户姓名</th>
					<th>性别</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="cus in content" align="center">
					<td><input type="radio" name="customer"/></td>
					<td>{{cus.id}}</td>
					<td>{{cus.name}}</td>
					<td>{{cus.sex}}</td>
					<td>{{cus.age}}</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

注：上述代码中的{{title}} 和 {{content}} 分别为父组件中向该子组件所要传递的数据

定义子组件

//定义子组件
const com={
	template:"#tm",//指向模板标签的id属性
	props:['title','content'],//定义属性
	data(){//向父组件要传递的数据
		return {
			ckCus:-1
		}
	}
};

注：上述代码中定义了一个ckCus,这是要向父组件传递数据时要传递的数据，并在子组件中使用v-model绑定在单选按钮上

3.调用父组件方法

<my-com @myclick="checkedCustomer"></my-com>
<button @click="$emit('myclick',ckCus)">确定</button>

methods:{
	checkedCustomer(id){  //提供给子组件调用的方法
		this.ckedCus=this.customers.filter(cus=>cus.id==id)[0];
	}
}

注意事项：
1、在子组件上绑定自定义事件 myclick
2、在父组件中编写myclick绑定的方法 checkedCustomer
3、在子组件中使用 $emit(‘自定义事件名’，传递参数值) 方法，可以调用父组件方法并传递参数

组件通信之父传子

使用属性传递

props:['title','content'],

data:{
	title:"客户列表",  //模板标题
	customers:[  //模板内容:向子组件传递的数据
		{id:1001,name:"Job",sex:"男",age:20},
		{id:1002,name:"Tom",sex:"女",age:23},
		{id:1003,name:"Peter",sex:"男",age:21},
		{id:1004,name:"Alice",sex:"女",age:19},
		{id:1005,name:"Mark",sex:"男",age:25},
	],
	ckedCus:null
},

<!-- 使用组件并向子组件传递数据 -->
<my-com :title="title" :content="customers" @myclick="checkedCustomer"></my-com>

说明：
1.在子组件中定义属性title和content
2.在父组件中定义数据
3.在子组件中通过属性将数据进行绑定
效果如图：
在这里插入图片描述

父组件如何使用子组件的属性和方法？

<my-com @click="cl" ref="child"></my-com>

methods:{
	cl(count){
		console.log(count,this.$refs.child.count++);//使用子组件的属性
	}
}

说明：在子组件使用 ref 属性，可以将子组件对象绑定到 $refs 对象中，因此可以通过该对象去获取子组件的属性或调用子组件中的方法。

总结

本文主要讲解了vue中组件之间通信的方法，子组件向父组件传递数据可以使用 $emit() 方法去调用父组件中的方法，父组件向子组件传递数据可以通过属性的方式传递。以及，父组件如需使用子组件的属性和方法，可以通过 $refs对象去访问。
最后，如需了解更多关于vue.js的知识，可以到vue.js的官网学习。
本次内容的源码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue组件通信之子传父</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 使用组件并向子组件传递数据 -->
			<my-com :title="title" :content="customers" @myclick="checkedCustomer"></my-com>
			<!-- 根据子组件传递的id显示信息 -->
			<p>选择的客户:{{ckedCus==null ? "未选择" : ckedCus.name}}</p>
		</div>
		
		<!-- 使用模板标签定义模板 -->
		<template id="tm">
			<div>
				<table border="0" cellspacing="0" cellpadding="5">
					<thead>
						<caption>{{title}}</caption>
						<tr>
							<th></th>
							<th>客户编号</th>
							<th>客户姓名</th>
							<th>性别</th>
							<th>年龄</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="cus in content" align="center">
							<td><input type="radio" name="customer" :value="cus.id" v-model="ckCus" /></td>
							<td>{{cus.id}}</td>
							<td>{{cus.name}}</td>
							<td>{{cus.sex}}</td>
							<td>{{cus.age}}</td>
						</tr>
						<tr>
							<td colspan="5"><button @click="$emit('myclick',ckCus)">确定</button></td>
						</tr>
					</tbody>
				</table>
			</div>
		</template>
	</body>
	<script type="text/javascript">
		//定义子组件
		const com={
			template:"#tm",
			props:['title','content'],
			data(){
				return {
					ckCus:-1
				}
			}
		};
		let vm=new Vue({
			el:"#app",
			data:{
				title:"客户列表",  //模板标题
				customers:[  //模板内容:向子组件传递的数据
					{id:1001,name:"Job",sex:"男",age:20},
					{id:1002,name:"Tom",sex:"女",age:23},
					{id:1003,name:"Peter",sex:"男",age:21},
					{id:1004,name:"Alice",sex:"女",age:19},
					{id:1005,name:"Mark",sex:"男",age:25},
				],
				ckedCus:null
			},
			components:{
				myCom:com,
			},
			methods:{
				checkedCustomer(id){  //提供给子组件调用的方法
					this.ckedCus=this.customers.filter(cus=>cus.id==id)[0];
				}
			}
		});
	</script>
</html>

路漫漫，其修远

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简述vue.js组件通信

vue父子组件通信组件通信之子传父使用模板标签建立模板<template id="tm"> <div> <table border="0" cellspacing="0" cellpadding="5"> <thead> <caption>{{title}}...
复制链接

扫一扫