vue3中使用v-model语法糖

// v-model:count=“dataCount” count子组件接收的值 dataCount父组件传递的值 子组件通过触发"update:count"转换

父组件

 <div class="btn-area">
        测试一个v-model
        <ModelTest v-model:count="dataCount"></ModelTest>
      </div>
import ModelTest from "./components/ModelTest.vue";

子组件ModelTest

<template>
  <div>{{ count }}111</div>
  <button @click="clickChange">点击改变count</button>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const emits = defineEmits(["update:count"]);
// 子组件中使用count进行接收 父组件中使用v-model绑定要改变的数据dataCount子组件中emits去传递要改变父组件的值
const props = defineProps({
  count: {
    type: [Number, String],
    default: 0,
  },
});
const clickChange = () => {
  emits("update:count", "iiai");
};
onMounted(() => {
  //console.log('3.-组件挂载到页面之后执行-------onMounted')
});
</script>
<style scoped lang='scss'>
</style>