vue组件传值

本文详细介绍了Vue中父组件与子组件之间的数据传递方法,包括父组件如何通过props向子组件传递数据,以及子组件如何使用$emit向父组件发送事件和数据。同时,文章还提供了具体的代码示例,帮助读者更好地理解和应用。

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

1.父组件传子组件

        父组件定义一个值,在子组件引入下面直接绑定

<Batchdistribution

:batchdistribution="batchdistribution"  控制窗口显示

:selections="selections" 全选的数据给子组件

:deptuseroption='deptuseroption' 部门用户的数据赋值给子组件

></Batchdistribution>

子组件接收:通过props来接收父组件传过来的值

props: {

batchdistribution: Boolean,

selections: Array,

deptuseroption:Array

}

子组件直接绑定值

<el-option

v-for="item in deptuseroption"

:key="item"

:label="item.userName"

:value="item.id"

></el-option>

2.子组件给父组件传值:通过提交方法来传值 this.$emit

// 点击部门

handleTreeSelectChange3Add(data, node) {

this.$emit("handleTreeSelectChange3Add",{data:data,node:node})

},

ColsePop: function(val) {

this.$emit("ColsePop");

},

父组件接收:

<Batchdistribution

@ColsePop="ColsePop"

@batchdistributionsubmitdept='batchdistributionsubmitdept'

@handleTreeSelectChange3Add="handleTreeSelectChange3Add "

></Batchdistribution>

通过方法来接收传过来的值

ColsePop: function() {

this.batchdistribution = false;

},

// 点击部门

handleTreeSelectChange3Add(params) {

this.deptinputValue = params.data.deptName;

this.deptId = params.data.id;

},

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值