js vue3子组件input向父组件传值

在Vue3中，子组件向父组件传递值需要使用事件（Event）。以下是一个简单的例子：

子组件template代码：

<template>
  <input type="text" v-model="inputValue" @input="updateValue">
</template>

<script>
  export default {
    data() {
      return {
        inputValue: ''
      }
    },
    methods: {
      updateValue() {
        this.$emit('update', this.inputValue);
      }
    }
  }
</script>

父组件template代码：

<template>
  <div>
    <child-component @update="handleUpdate"></child-component>
    <p>输入的值是：{{ value }}</p>
  </div>
</template>

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

  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        value: ''
      }
    },
    methods: {
      handleUpdate(value) {
        this.value = value;
      }
    }
  }
</script>

在子组件中，我们使用了`v-model`来双向绑定输入框的值，并在输入框的`input`事件中触发了`updateValue`方法。在这个方法中，我们使用`$emit`方法触发了一个名为`update`的事件，并将输入框的值作为参数传递给父组件。

在父组件中，我们引入了子组件，并在子组件上绑定了一个`update`事件。在事件处理函数`handleUpdate`中，我们将传递过来的值赋值给了父组件的`value`属性。

这样，子组件就可以通过事件向父组件传递值了。