vue3的v-model

父

<template>
  <div>
    <!-- v-model 没有指定参数名时，子组件默认参数名是modelValue -->
    <ChildComp v-model="search" />
    <h1>{{ search }}</h1>
  </div>
</template>
<script>
import {  ref } from 'vue'
import ChildComp from './inp.vue'
 
export default ({
  name: 'Index',
  components: {
    ChildComp
  },
  setup () {
    const search = ref('')
    return {
      search
    }
  }
})
</script>

子

<template>
  <div>
    <input v-model="sea" @input="Change(sea)" />
  </div>
</template>
<script >
import { ref, watch } from "vue";

export default {
  name: "ChildComp",
  props: {
    modelValue: {
      // 父组件 v-model 没有指定参数名，则默认是 modelValue
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    // input初始化
    const sea = ref(props.modelValue);

    // 因为props.modelValue是非引用类型，改变时，需要监听，对sea重新赋值
    watch(
      () => props.modelValue,
      () => {
        sea.value = props.modelValue;
      }
    );

    // 数据双向绑定
    function Change(e) {
      emit("update:modelValue", e);
    }

    return {
      sea,
      Change,
    };
  },
};
</script>