vue2子组件向父组件传多个值
时间: 2023-03-04 19:25:37 浏览: 69
在 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` 来获取子组件传递的多个值。