在Vue3中，
子组件向
父组件传递
值可以通过自定义事件和props属性来实现。
1. 使用自定义事件：
子组件可以通过`$emit`方法触发一个自定义事件，并将需要
传递的
值作为参数
传递给
父组件。在
父组件中，可以通过在
子组件上监听该自定义事件来接收
传递的
值。
子组件代码示例：
```vue
<template>
<button @click="sendValue">
传递
值给
父组件</button>
</template>
<script>
export default {
methods: {
sendValue() {
this.$emit('custom-event', '
传递的
值');
}
}
}
</script>
```
父组件代码示例：
```vue
<template>
<div>
<child-component @custom-event="handleValue"></child-component>
<p>接收到的
值：{{ receivedValue }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
receivedValue: ''
}
},
methods: {
handleValue(value) {
this.receivedValue = value;
}
}
}
</script>
```
2. 使用props属性：
父组件可以通过props属性向
子组件传递一个变量，
子组件可以通过props接收该变量，并在需要时修改它。
父组件可以监听
子组件的变化来获取
传递的
值。
父组件代码示例：
```vue
<template>
<div>
<child-component :value="receivedValue" @update-value="handleValue"></child-component>
<p>接收到的
值：{{ receivedValue }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
receivedValue: ''
}
},
methods: {
handleValue(value) {
this.receivedValue = value;
}
}
}
</script>
```
子组件代码示例：
```vue
<template>
<div>
<button @click="updateValue">修改
值并
传递给
父组件</button>
</div>
</template>
<script>
export default {
props: ['value'],
methods: {
updateValue() {
const newValue = '新的
值';
this.$emit('update-value', newValue);
}
}
}
</script>
```
606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
