modelValue使用

modelValue使用：双向数据绑定

父组件

<template lang="">
  <div>
    开发者
    <button :class="{active:bool}" @click="bool = !bool">按键</button>
    <br>
    <br>
    <mainson :bool="bool">组件</mainson>
    <br>
    <br>
    <!-- 双向数据绑定 -->
    <mainsonson v-model="cnt"></mainsonson>
  </div>
</template>
<script>
import {
    ref } from 'vue'
import mainson from './mainson.vue'
import mainsonson from './mainsonson.vue'
export default {
   
  components: {
   
    mainson,
    mainsonson
  },
  setup (props) {
   
    const bool = ref(true)
    const cnt = ref(0)
    return {
    bool, cnt }
  }
}
</script>
<style lang="less" scoped>
.active{
   
  color:red
}
</style>

子组件

<!--
 * @Author: 天弘运文武睿哲恭俭宽裕孝敬诚信中和功德大成仁皇帝(康熙)
 * @Date: 2022-05-12 22:38:18
 * @LastEditors: 天弘运文武睿哲恭俭宽裕孝敬诚信中和功德大成仁皇帝(康熙)
 * @LastEditTime: 2022-05-12 22:49:23
 * @FilePath: \03vue3\src\mainsonson.vue
 * @Description:
 *
 * Copyright (c) 2022 by 用户/公司名, All Rights Reserved.
-->
<template lang="">
  <div>
      <input type="text" :value="modelValue" >
      <a @click="changeData(1)" href="javascript:;">add</a>
      &emsp;
      <a @click="changeData(-1)" href="javascript:;">sub</a>
  </div>
</template>
<script>
import {
    useVModel } from '@vueuse/core'
export default {
   
  props: {
   
    modelValue: {
   
      type: Number,
      default: 1
    }
  },
  setup (props, {
     emit }) {
   
    // 添加事件
    const val = useVModel(props, 'modelValue', emit)
    const changeData = (step) => {
   
      const newVal = val.value + step
      if