vue 子组件像父组件传递参数
时间: 2023-12-23 16:26:54 浏览: 29
在Vue中,子组件向父组件传递参数可以通过emit事件来实现。具体步骤如下:
1.在子组件中定义一个方法,用于触发自定义事件并传递参数。例如,我们定义一个名为`sendData`的方法,用于向父组件传递数据。
```javascript
<script>
export default {
methods: {
sendData() {
this.$emit('my-event', 'hello world');
}
}
}
</script>
```
2.在父组件中引入子组件,并在子组件上绑定自定义事件。例如,我们引入一个名为`ChildComponent`的子组件,并在子组件上绑定一个名为`my-event`的自定义事件。
```javascript
<template>
<div>
<child-component @my-event="handleEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleEvent(data) {
console.log(data); // 输出:hello world
}
}
}
</script>
```
在这个例子中,我们在父组件中定义了一个名为`handleEvent`的方法,用于接收子组件传递过来的数据。在子组件上,我们通过`$emit`方法触发了一个名为`my-event`的自定义事件,并将数据`hello world`作为参数传递给了父组件。