vue 父子组件传值(父传子)

本文详细介绍了在Vue项目中如何通过v-model实现父组件向子组件传递数据,以el-radio-group为例,展示了如何在标签中传值并接收,适用于全局使用的场景。

在项目中经常会用到传值的情况,今天说下父传子的传值方法:

父组件使用 v-model 绑定,并在标签里传值,引入子组件

<el-radio-group v-model="radio" @change=changeMax>
    <el-radio v-model="addCagLabel"  v-for="item in radioPay" :key="item.value" :label="item.label" :value="item.value"></el-radio>
</el-radio-group>

//标签传值

<offLineTask
      :radio = 'radio'
      :addCagLabel= 'addCagLabel'>
</offLineTask>
//引入组件
import offLineTask from './components/offLineTask'

//注册
export default {
	components:{
		offLineTask
	},
	data(){
	return {
      addCagLabel:'BESTPAY',
      radio: '翼支付客户端' ,
      radioPay:[
        {
          label:'其他',
          value:'9999',
        },
        {
          label:'翼支付客户端',
          value:'BESTPAY'
        },
        {
          label:'财富客户端',
          value:'FIN'
        },
      ],
   }
}
}


子组件使用porps接收,这样就可以全局使用了

export default {
	porps:{'radio','addCagLabel'} //接收
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值