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

最新推荐文章于 2024-08-06 10:28:17 发布
最新推荐文章于 2024-08-06 10:28:17 发布
阅读量2.4k 收藏 2
点赞数
分类专栏： vue web前端 文章标签： 购物车地址动态变换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40976560/article/details/90741567
版权
本文介绍如何在Vue中实现子组件向父组件传递数据。通过定义自定义事件并在子组件中触发该事件，配合父组件监听并处理事件来完成数据的传递。在子组件中创建方法，然后在父组件的模板中绑定该事件，从而在父组件的事件处理函数中接收并更新数据。
摘要由CSDN通过智能技术生成

思路：
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.provinc
最低0.47元/天 解锁文章
fuguoda
关注
专栏目录
vue监听赋值值以及provide与inject
weixin_41143662的博客
11-20 7914
在子组件增加watch监听 watch: { 'oState': function (val) { this.getOrderList({orderStatus: this.getOrderState(this.oState), pageSize: 1}) } },
vue子组件监听父组件传值
曹定栓的博客
10-20 2万+
vue子组件监听父组件传值
Vue父组件实时监听子组件的值
最新发布
CharleneD的博客
08-06 118
可利用watch对值进行监听。
父组件监听子组件的值的变化并把值传给父组件
qq_39232387的博客
03-02 2371
页面的头部这个时间是引用的一个子组件，我想在父组件中用这个时间并且是时刻变化的值 子组件中watch监听 watch: { dataTime(val) { //dateTime是你在props或者data中定义的你要监听的值 this.$emit('dataTime', val) //传给父组件 }, }, 父组件引用的时候加@dateTime="nickName" <top :name="topName" @dateTime="nickName"
vue中父子组件传值问题(深度监听)
weixin_45426989的博客
11-07 3178
vue中父子组件传值问题 普通的父子组件通常都是在子组件中绑定某个属性，在子组件中用props接收，子组件通过$emit将值传递给父组件。父组件通过$emit传递的函数和值来得到子组件的值。 // 父组件中，子组件的写法 // id 是要传递到子组件的值 <subCompont @hideHandle="drawerHide" :id="id"></subCompont> ...
vue 父组件监听子组件，子组件向父组件传值
Yss915的博客
11-04 1528
子组件中通过emit来向父组件传值 例子：子组件点击缩进菜单，父组件菜单栏变窄 子组件 navheader 的内容： <div class="left" @click="collapse"> <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" /> </div> //div点击后调用方法给父组件 collapse() { this.is
vue 父组件给子组件传值子组件给父组件传值的实例代码
10-17
本篇将详细讲解Vue中的父子组件传值机制，包括父组件如何向子组件传递数据以及子组件如何向父组件反馈信息。 1. **父组件给子组件传值** 在Vue中，父组件向子组件传递数据主要是通过`props`属性实现的。首先，在...
vue 组件间的通信之子组件向父组件传值的方式
11-20
父组件通常通过属性（props）向下传递数据给子组件，而子组件向父组件传递数据则通常通过事件（events）。这是 Vue 推荐的单向数据流策略，确保数据流动的方向清晰，有利于维护和调试。 ### 1. 子组件通过 `this.$...
vue父组件向子组件动态传值的两种方法
08-28
在 Vue 中，父组件向子组件传值是非常常见的场景。在本文中，我们将介绍两种方法来实现父组件向子组件动态传值。 方法一：使用 Props 传值 在 Vue 中，我们可以使用 props 将数据从父组件传递给子组件。 props 是...
vue 子组件向父组件传值方法
08-27
首先，父组件通过`props`向子组件传递一个值，然后子组件在完成计算或处理后，通过`$emit`将新的值返回给父组件，父组件再更新自身的状态。 总结，Vue.js中子组件向父组件传递数据主要依赖于自定义事件和`$emit`...
vue监听子组件并向父组件传参父组件接收并渲染（监听--子传父）（无触发事件）
一蓑烟雨任平生的博客
06-08 779
项目场景： 监听div值的变化监听传值 子组件： 监听div值的变化 子组件代码： <div v-text="formateTime"></div> watch: { // 监听并向父组件传值 formateTime: { handler: function (val, oldval) { console.log("改变后日期", val, "初始日期", oldval); this.$emit("changeforma
vue子组件监听父组件数据变化并作出改变（亲测有效）
mrliucx的博客
03-01 1万+
vue子组件监听父组件数据变化并作出改变（亲测有效）
Vue3父子组件间传值
SEKIRO_DJ的博客
07-25 1万+
在vue3中，子组件接收父组件值的方式发生了变化，直接用props接收后是无法使用的。 让我们先来看看vue2父子间的传值 父传子 <template> <div> <h1>父组件</h1> <hr /> <son :value="parentValue"></son> </div> </template> <script> import son f
vue通过子组件修改父组件prop的几种实现方式
栋子哥的开发日常
09-21 5843
目录前言常用方式1. 通过父组件on监听子组件emit事件实现修改prop2. 通过父组件sync修饰符 + 子组件emit事件实现修改prop取巧方式3.通过赋值到data实现修改prop4.通过计算属性监听实现修改prop 前言 实际工作项目开发中，很经常会有父组件先传递值给子组件，再由子组件渲染展示的场景，下面我总结一下目前工作中遇到和用过的一些方式，也算是给大家一个实现方式和思路参考，如有理解不对or有其他方法欢迎在评论区留言指导～ 常用方式 推荐，遵循prop单向传递的规则，基本数据类型和引用数据
vue子组件给父组件传值，即父组件监听子组件($emit)
weixin_43930256的博客
11-21 2971
vue子组件给父组件传值，即父组件监听子组件($emit)
vue -- watch侦听器与父子组件间通信
聪明勇敢有力气的博客
10-22 1383
watch侦听器 父子组件间通信
Vue父子传值及监听
phl123_的博客
04-24 951
Vue父子传值
vue watch监听对象及对应值的变化
热门推荐
金大光
12-05 14万+
var vm=new Vue({ data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{
Vue3子组件传值给父组件
09-17
在Vue 3中，可以使用props来实现子组件向父组件传值的功能。以下是具体的步骤： 1. 在父组件中定义一个props属性来接收子组件传递的值。例如，在父组件的模板中添加props属性： ```html <template> <div> <child-component :childData="dataFromChild"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { dataFromChild: '' } } } </script> ``` 在上述代码中，父组件通过`childData` prop接收子组件传递的值。 2. 在子组件中通过`$emit`方法将需要传递的值发送给父组件。例如，在子组件的方法中使用`$emit`方法： ```html <template> <div> <button @click="sendDataToParent">传递数据给父组件</button> </div> </template> <script> export default { methods: { sendDataToParent() { this.$emit('child-data', '这是子组件传递给父组件的数据'); } } } </script> ``` 在上述代码中，子组件通过`this.$emit('child-data', value)`来触发一个名为`'child-data'`的自定义事件，并将需要传递的数据作为第二个参数传递给父组件。 3. 在父组件中监听子组件触发的自定义事件，并更新父组件的数据。例如，在父组件的模板中监听子组件传递的数据： ```html <template> <div> <child-component @child-data="handleChildData"></child-component> <p>从子组件传递的数据：{{ dataFromChild }}</p> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { dataFromChild: '' } }, methods: { handleChildData(value) { this.dataFromChild = value; } } } </script> ``` 在上述代码中，父组件通过`@child-data="handleChildData"`监听了子组件触发的名为`'child-data'`的自定义事件，并在`handleChildData`方法中更新了父组件的数据。 通过以上步骤，就可以实现Vue 3中子组件向父组件传值的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值