vue 父组件向子组件传值

最新推荐文章于 2025-07-11 10:33:44 发布

原创最新推荐文章于 2025-07-11 10:33:44 发布 · 376 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #父子组件 #前端

vue 专栏收录该内容

42 篇文章

订阅专栏

本文详细介绍了在Vue项目中如何实现父组件与子组件之间的数据传递及状态切换，包括子组件如何通过props接收父组件数据，以及如何通过$emit调用父组件方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看代码：

1、父组件：

<template>
  <div>
	<div v-if="!userShow">
	  父组件内容区
	  <el-button @click="lookUserInfo(scope.row)">&nbsp;查看</el-button> 
	</div>
	<!-- 子组件 -->
	<user-manager  v-if="userShow" v-bind:userData = "userList"> </user-manager>	
  </div>
</template>
<script>
  //导入用户页面
  import userManager from '../userManager.vue';
  export default {
	name:'taskManager',
	components:{userManager},
	data() {
	  return {
		userShow:false,	
		userList:[]
	  }
	},
	methods: {
	  //显示子组件,隐藏父组件
	  lookUserInfo(row) {
		this.userShow = true;
	  },
	  //此方法，子组件会调用，调用返回父页面：隐藏子组件，显示父组件
	  showUserInfo() {
		this.userShow = false;
	  },
	}
  }	
</script>

2、子组件：

<template>
  <div>
		<!-- 返回父页面按钮 -->
		<div>
            <el-button @click="goToParent"> &nbsp;&nbsp;返回</el-button>
        </div>
		<div>
			搜索区
		</div>
		<div class="white-bg margin auto">
			<el-table>
				数据表格展示区	
			</el-table>
		</div>
	</div>
</template>
<script>
	export default {
	 	name:'userManager',
		props: ['userData'],//接收父组件的参数
	 	data() {
	 		return {
				userDataInfo:[]
			}
		},
		mounted: function () {
            this.userDataInfo= this.userData;
        },		
		methods: {
			goToParent() {
				//调父页面方法
			    this.$emit('close');
			}
		}
	}	
</script>

说明：

1、父组件中：
（1）、导入子组件： import userManager from '../userManager.vue';
（2）、引用子组件： components:{userManager},
（3）、使用子组件： <user-manager> </user-manager>
（4）、向子组件传值：<user-manager v-bind:userData = "userList"> </user-manager> 重点是v-bind:userData = "userList"这句，v-bind:userData中的userData名字随意取，= 后的"userList" 与子组件无关，是属于父组件的数据

2、子组件中：

父组件中：
（1）、接收父组件的参数：props: ['userData'], userData要与父页面v-bind:userData中的userData名一致
（2）、使用接收父组件的值： this.userDataInfo= this.userData;