uniapp子组件向父组件传值
时间: 2023-09-03 07:10:40 浏览: 83
在uniapp中,子组件向父组件传值可以使用自定义事件。具体步骤如下:
1.在子组件中定义自定义事件
在子组件的 script 标签中,可以先定义一个方法,用于触发自定义事件并传递数据。如下所示:
```
methods: {
sendData() {
this.$emit('myevent', '这是要传递的数据')
}
}
```
其中 `this.$emit()` 方法用于触发自定义事件,第一个参数为自定义事件的名称,第二个参数为要传递的数据。
2.在父组件中监听自定义事件
在父组件中使用子组件时,可以在子组件上监听自定义事件,并在触发事件时执行相应的方法。如下所示:
```
<template>
<div>
<child-component @myevent="handleData"></child-component>
</div>
</template>
<script>
import childComponent from '@/components/child-component'
export default {
components: {
childComponent
},
methods: {
handleData(data) {
console.log(data) // 输出:这是要传递的数据
}
}
}
</script>
```
在子组件上使用 `@myevent` 监听自定义事件,并在触发事件时执行 `handleData` 方法。在该方法中可以获取到子组件传递过来的数据。
需要注意的是,父组件中监听的自定义事件名称应该与子组件中触发的自定义事件名称一致,否则无法传递数据。
阅读全文