vue3父组件触发事件传值给子组件
时间: 2024-10-13 16:01:57 浏览: 66
vue父组件给子组件传值
Vue 3 中,父组件通过事件(通常称为自定义事件或$emit)触发并传递数据给子组件。以下是一个基本示例:
1. **在父组件上创建事件**:
```javascript
<template>
<div>
<child-component @someEvent="handleSomeEvent"></child-component>
</div>
</template>
// 父组件的script部分
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
methods: {
handleSomeEvent(value) {
this.$emit('someEvent', value);
}
}
}
```
2. **子组件监听事件**:
子组件需要定义一个名为`someEvent`的事件处理函数,它会接收从父组件传递过来的数据:
```vue
<template>
<button @click="passDataToParent">传递数据到父组件</button>
</template>
<script>
import { ref } from 'vue';
export default {
methods: {
passDataToParent() {
this.$emit('someEvent', '这是从子组件传给父组件的数据');
}
}
}
</script>
```
当你点击子组件的按钮时,`passDataToParent`方法会被调用,然后触发`someEvent`并将数据传递给父组件,父组件内的`handleSomeEvent`方法会接收到这个数据。
阅读全文