vue--使用监听属性完成子组件传值给父组件

最新推荐文章于 2025-06-10 09:57:51 发布

fuguoda

最新推荐文章于 2025-06-10 09:57:51 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue web前端文章标签：购物车地址动态变换

本文链接：https://blog.youkuaiyun.com/qq_40976560/article/details/90741567

本文介绍如何在Vue中实现子组件向父组件传递数据。通过定义自定义事件并在子组件中触发该事件，配合父组件监听并处理事件来完成数据的传递。在子组件中创建方法，然后在父组件的模板中绑定该事件，从而在父组件的事件处理函数中接收并更新数据。

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

思路：
1.子组件传参给父组件主要是通过$emit方法来实现的。
2.在子组件中使用$emit方法，一般它接受两个参数，第一个是自定义事件(这个事件在父组件中需要用到)，第二个参数就是需要传的数据了。
3.而在父组件里，在调用的标签上引用子组件定义的那个事件，然后事件绑定一个函数。在函数里面进行赋值即可。

1、子组件

template代码

  <div class="panel-footer select-addr-list col-xs-6 col-md-3 col-sm-4 fontMin"  v-for="(addr,index) in addrs">
	    	<div class="addr-list-box" :class="{ active: index==isAtive}" @click="check(addr,index)">
	    		<div class="addr-name">
		    		<span>（</span>
		    		<span>{
  
  {addr.recipients}}</span>
		    		<span>收）</span>
		    		<span>{
  
  {addr.telephone}}</span>
		    	</div>
		    	<div class="addr-bd">
		    		<span>{
  
  {addr.province}}</span>
		    		<span>{
  
  {addr.city}}</span>
		    		<span>{
  
  {addr.area}}</span>
		    		<span