vue3中子组件中的input如何传值给父组件

在Vue 3中，子组件向父组件传递数据可以使用事件机制。以下是一种常见的方法：

1. 在子组件中，使用`v-model`指令绑定一个本地的data属性到父组件传递的属性上。例如，将输入框的值绑定到一个名为`inputValue`的data属性上：

<template>
  <input v-model="inputValue" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  mounted() {
    this.$emit('update:propName', this.inputValue);
  },
  watch: {
    inputValue(newValue) {
      this.$emit('update:propName', newValue);
    }
  }
}
</script>

上述代码中，`v-model`指令会自动为`input`元素绑定一个`value`属性，并且在输入框内容发生变化时更新本地的`inputValue`属性。`mounted`钩子函数会在组件挂载后立即触发，并通过`$emit`方法将初始值传递给父组件。同时，使用`watch`监听`inputValue`的变化，一旦变化，就通过`$emit`方法将最新的值传递给父组件。

2. 在父组件中，使用子组件时，可以通过监听子组件触发的自定义事件来接收传递的数据。例如，监听子组件触发的名为`update:propName`的事件：

<template>
  <ChildComponent v-model:propName="parentValue" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentValue: ''
    }
  },
  methods: {
    handleValueChange(newValue) {
      this.parentValue = newValue;
    }
  },
  mounted() {
    this.$on('update:propName', this.handleValueChange);
  },
  beforeUnmount() {
    this.$off('update:propName', this.handleValueChange);
  }
}
</script>

上述代码中，使用`v-model:propName`将`parentValue`属性绑定到子组件的`propName`属性上。通过`$on`方法监听子组件触发的`update:propName`事件，并在事件触发时调用`handleValueChange`方法更新父组件的属性。在组件销毁前，务必使用`$off`方法取消事件监听。

这样，当子组件中的输入框内容发生变化时，会实时将值传递给父组件中的属性，并在父组件中进行更新。