vue3中子组件怎么console.log
时间: 2023-09-07 16:16:53 浏览: 79
在Vue 3中,你可以使用`$emit`来在子组件中触发一个自定义事件,并将需要传递的数据作为参数。然后在父组件中监听这个自定义事件,并在事件处理函数中进行`console.log`操作。
以下是一个示例:
在子组件中,你可以使用`$emit`来触发一个自定义事件,例如:
```vue
<template>
<button @click="logData">Click Me</button>
</template>
<script>
export default {
methods: {
logData() {
const data = 'Hello from child component';
this.$emit('customEvent', data);
}
}
}
</script>
```
在父组件中,你可以通过在子组件上使用`@customEvent`来监听这个自定义事件,并在事件处理函数中进行`console.log`操作,例如:
```vue
<template>
<div>
<child-component @customEvent="handleCustomEvent"></child-component>
</div>
</template>
<script>
export default {
methods: {
handleCustomEvent(data) {
console.log(data);
}
}
}
</script>
```
当子组件中的按钮被点击时,子组件会触发`customEvent`事件,并将数据传递给父组件的`handleCustomEvent`方法,然后在父组件的方法中进行`console.log`操作。