vue3+ts+defineProps+defineEmits+computed实现

直接上代码：

<template>
     <div @click="addCount(count + 1)">我是子组件{{ count }}</div>
     <el-input v-model="nCount"></el-input>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, computed } from "vue";

interface PROPS {
  count: number;
  count1: number;
}

const props = defineProps<PROPS>();

interface EMITS {
  (e: 'update:count', data?: number): void,
  (e: 'update:count1', data?: number): void,
}
const emit = defineEmits<EMITS>();

const addCount = (v: number) => {
  emit("update:count", v);
};


const nCount = computed({
  get() {
    return props.count1
  },
  set(v) {
    emit("update:count1", Number(v));
  }
})

</script>

<style scoped>
</style>

父组件：

<template>
  <div>
    <el-button @click="count++">111</el-button>
    <Child v-model:count="count" v-model:count1="count1" />
  </div>
</template>

<script setup lang="ts">
import { inject, ref } from "vue";
import Child from "./child.vue";

const count = ref(0);
const count1 = ref(1);

</script>

<style scoped>
</style>