注意：v-mode在vue2.x和vue3.x中的使用方法有异同。
本节代码demo地址：demo项目链接

1、比较vue2.x和 vue3.x

vue2.x：允许组件自定义用于 v-model 的 prop 和事件。但是，这仍然只允许在组件上使用一个 model。
vue3.x：双向数据绑定的 API 已经标准化。（一个组件上允许使用多个model）

具体的vue升级变动，请阅读官方vue3中文文档： vue3.x中文文档

2、demo图

3、代码

Model.vue文件（父组件）

<template>
  <div>
    <h3>v-model的使用</h3>
    <button @click="changeFlag">显示子组件</button>
    <p>这是要传递的值 {{ num }}</p>
    <Popover v-model:number="num" v-model:visible="isShow"></Popover>
  </div>
</template>

<script>
import { ref } from "vue";
import Popover from "@/components/Popover";

export default {
  setup() {
    const num = ref(10);
    const isShow = ref(false);
    const changeFlag = () => {
      isShow.value = true;
    };
    return {
      num,
      isShow,
      changeFlag
    };
  },
  components: {
    Popover
  }
};
</script>

<style scoped></style>

Popover.vue（子组件）

<template>
  <div class="pop-box" v-if="visible">
    <p>我是内容</p>
    <label>
      <input type="number" :value="number" @change="changeNumber" />
    </label>
    <br />
    <button @click="changevVisible" style="margin-top: 20px">隐藏子组件</button>
  </div>
</template>

<script>
export default {
  props: {
    number: {
      type: Number,
      default: 0
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  setup(props, context) {
  	//setup第一个形参：接收props参数
  	//setup第二个形参：上下文对象。这个上下文对象中包含了一些有用的属性，这些属性在 vue 2.x 中需要通过 this 才能访问到
    const changevVisible = () => {
      context.emit("update:visible", false);
    };
    const changeNumber = e => {
      context.emit("update:number", parseInt(e.target.value));
    };
    return {
      changevVisible,
      changeNumber
    };
  }
};
</script>

<style scoped lang="less">
.pop-box {
  width: 400px;
  height: 200px;
  border: 1px dashed aquamarine;
  margin: 10px auto;
}
</style>

4、总结

1）父传值：v-model:xxx=""
2）子接收：用props接收
3）子传父：context.emit(“update:xxx”,value)
4）注意：在 setup() 函数中无法访问到 this

学习笔记，以供参考，如有问题欢迎赐教！