TS+VUE3子组件向父组件传值
时间: 2023-08-31 10:08:55 浏览: 119
在Vue 3中,子组件向父组件传值的常用方法是通过自定义事件来实现。下面是一个简单的示例:
在子组件中,你可以通过 `$emit` 方法触发一个自定义事件,并将需要传递的值作为参数传递给父组件。
```vue
<template>
<button @click="sendValue">传递值给父组件</button>
</template>
<script>
export default {
methods: {
sendValue() {
// 传递值给父组件
this.$emit('value', '这是子组件传递给父组件的值');
}
}
}
</script>
```
在父组件中,你可以通过监听子组件触发的自定义事件,并在事件处理方法中获取到子组件传递的值。
```vue
<template>
<div>
<p>从子组件接收到的值:{{ receivedValue }}</p>
<child-component @value="handleValue"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
receivedValue: ''
}
},
methods: {
handleValue(value) {
// 接收到子组件传递的值
this.receivedValue = value;
}
}
}
</script>
```
在父组件中使用 `@value` 监听子组件触发的自定义事件,并在 `handleValue` 方法中获取到子组件传递的值。然后你就可以在父组件中使用该值了。
这是一种常用的子组件向父组件传值的方式,你可以根据具体的需求进行调整和扩展。
阅读全文