js vue3setup语法糖，父子组件input传值

在Vue3中，使用`setup`语法糖来编写组件，可以将组件的逻辑和模板分离，更加清晰和易于维护。以下是一个简单的例子，包括父子组件之间的输入框传值：

父组件template代码：

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

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

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

在父组件中，我们引入了子组件，并将父组件的`value`属性传递给了子组件的`prop-value`属性。我们还在子组件上绑定了一个`update-value`事件，用于接收子组件传递过来的值。

子组件template代码：

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

在子组件中，我们使用了`v-model`来双向绑定输入框的值，并在输入框的`input`事件中触发了`updateValue`方法。

子组件script代码：

<script>
  export default {
    props: {
      propValue: {
        type: String
      }
    },
    setup(props, { emit }) {
      const inputValue = Vue.ref(props.propValue);

      function updateValue() {
        emit('update-value', inputValue.value);
      }

      return {
        inputValue,
        updateValue
      }
    }
  }
</script>

在子组件的`setup`函数中，我们使用了`props`参数来获取父组件传递过来的`prop-value`属性，使用了`emit`函数来触发`update-value`事件，并将输入框的值作为参数传递给父组件。

这样，我们就实现了父子组件之间的输入框传值。父组件可以通过属性将父组件的值传递给子组件，子组件可以通过事件将输入框的值传递给父组件。