官方链接：useVModel | VueUse中文文档 (vueusejs.com)

推荐视频

简易代码

注意：当子组件参数为modelValue时，父组件的v-model后可以不跟modelValue

父组件：

1
2
3
4
5
<app-menu
  ref="appMenuRef"
  v-model:isShowToolTip="isShowToolTip"
  :onMenuSelect="onItemMenuSelect"
/>

子组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { ref, defineProps, defineEmits } from "vue";
import { useVModel } from "@vueuse/core";

// 定义宏，用来通知父组件更新值
const emit = defineEmits(["update:isShowToolTip"]);
// 接收父组件参数
const props = defineProps({
  onMenuSelect: Function,
  isShowToolTip: Boolean
});
// 通过useVModel创建一个ref类型的双向绑定变量
const isShowToolTip = useVModel(props, 'isShowToolTip',emit);

// 示例用法，下面的赋值会自动请求update:isShowToolTip
isShowToolTip.value = false;