vue3子组件到父组件动态传值

在Vue3中，子组件向父组件动态传值通常通过`props`和`emit`事件配合来实现。下面是一个简单的例子：

1. **父组件**（ParentComponent.vue）:

<template>
  <div>
    <child-component :value="displayValue" @update-value="handleUpdateValue"></child-component>
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';

const displayValue = ref('初始值');
function handleUpdateValue(value) {
  displayValue.value = value;
}
</script>

在这个例子中，`displayValue`是一个响应式的变量，它接收从`ChildComponent`传递过来的`value`属性。当子组件通过`@update-value`自定义事件发送新的值时，父组件的`handleUpdateValue`函数会被调用并更新`displayValue`。

2. **子组件**（ChildComponent.vue）:

<template>
  <button @click="sendNewValue">点击更新父组件</button>
</template>

<script>
export default {
  props: ['value'], // 接收父组件的值
  methods: {
    sendNewValue() {
      this.$emit('update-value', '新值'); // 发送更新值的事件
    }
  }
};
</script>

当你点击子组件的按钮时，会触发`sendNewValue`方法，进而触发`update-value`事件，并将新值传递给父组件。