Vue3父子组件传值双向绑定

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

推荐视频

{% raw %}

{% endraw %}

简易代码

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

父组件：

  <app-menu
    ref="appMenuRef"
    v-model:isShowToolTip="isShowToolTip"
    :onMenuSelect="onItemMenuSelect"
  />

子组件：

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;