VUE 子组件向父组件传多个值

子组件

子组件通过$emit触发父组件中的自定义函数,第一个值为自定义函数名,后面的参数是向父组件传的值

<van-button @click="emitGetList" type="info">搜索</van-button>

emitGetList(){             
   this.$emit('refreshList',this.cityValue,this.amount,this.requires);
 },

父组件

<searchChild @refreshList = 'getDate' ></searchChild>

 getDate(city,industry,Lstyle,amount,requires){
      this.cityValue = city
      this.industry = industry
      this.Lstyle = Lstyle
      this.amount = amount
      this.requires = requires
      this.getList()
},

 

  • 4
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue2 中,可以通过使用自定义事件,在组件和父组件之间多个。 具体来说,你可以在组件中通过 `$emit` 方法触发一个自定义事件,同时将需要递的多个作为参数递给该方法。父组件可以通过在组件上使用 `v-on` 指令来监听该事件,并在触发时执行相应的方法。在父组件的方法中,可以通过事件对象(一般命名为 `event`)来获取组件递的多个。 以下是一个示例: 组件代码: ``` <template> <div> <button @click="submit">提交</button> </div> </template> <script> export default { methods: { submit() { const name = 'John' const age = 20 const address = '123 Main St' this.$emit('form-submitted', name, age, address) } } } </script> ``` 父组件代码: ``` <template> <div> <form-component v-on:form-submitted="handleFormSubmit"></form-component> </div> </template> <script> import FormComponent from './FormComponent.vue' export default { components: { FormComponent }, methods: { handleFormSubmit(event, name, age, address) { // 在事件处理函数中获取组件递的多个 console.log(name, age, address) } } } </script> ``` 在上面的示例中,组件通过 `$emit` 方法触发了一个名为 `form-submitted` 的自定义事件,并递了三个 `name`、`age` 和 `address`。父组件组件上使用 `v-on` 指令来监听该事件,并在触发时执行名为 `handleFormSubmit` 的方法。在 `handleFormSubmit` 方法中,我们可以通过事件对象 `event` 和额外的参数 `name`、`age` 和 `address` 来获取组件递的多个

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值