vue3中自定义组件使用v-model实现双向数据绑定

父组件

<template>
  <div>
    <Myinput v-model:firstName="firstName" v-model:lastName="lastName"/>
    {{firstName}}--{{lastName}}
  </div>
</template>

<script>
import Myinput from "../components/Myinput.vue";
export default {
  components: {
    Myinput,
  },
  name: "home",
  data() {
    return {
      firstName:"",
      lastName:"",
    };
  },
  methods: {
  },
};
</script>

<style></style>

子组件

<template>
  <div>
    <input @input="$emit('update:firstName',$event.target.value)" :value="firstName" placeholder="输入框"/>
    <input @input="$emit('update:lastName',$event.target.value)" :value="lastName" placeholder="输入框"/>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['firstName','lastName'],
  data() {
    return {};
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style scoped lang="less">
  input{
    width:400px;
    height:32px;
    line-height: 32px;
  }
</style>