vue的js代码,点击一个按钮触发另一个¥emit自定义函数
时间: 2024-04-24 18:05:41 浏览: 13
这是一个技术问题,可以通过以下代码实现:
在父组件中:
```javascript
<template>
<div>
<button @click="handleClick">点击我触发子组件的自定义事件</button>
<child-component @custom-event="handleCustomEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent'
export default {
components: {
ChildComponent
},
methods: {
handleClick() {
// 触发子组件的自定义事件
this.$refs.child.$emit('custom-event', 'Hello World!')
},
handleCustomEvent(payload) {
// 处理子组件传递过来的数据
console.log(payload)
}
}
}
</script>
```
在子组件中:
```javascript
<template>
<div>子组件</div>
</template>
<script>
export default {
mounted() {
// 监听父组件传递过来的自定义事件
this.$on('custom-event', this.handleCustomEvent)
},
methods: {
handleCustomEvent(payload) {
// 处理父组件传递过来的数据
console.log(payload)
// 触发自定义事件,把处理后的数据传递给父组件
this.$emit('custom-event', 'Hello ChitGPT!')
}
}
}
</script>
```