Vue3 父子组件交互

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

最近的工作中需要实现一个小功能，主要就是一个Tree列表点击右键，出现右键菜单,等用户点击右键菜单中的其中某一个菜单项之后,打开新的dialog弹框,右键菜单项关闭

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、组件

父组件

二、使用步骤

1.父调子

父组件调子组件，并修改子组件v-show="visible"的visible值，将false改为true
代码如下

子组件

<template>
    <div v-show="visible" class="right-click-menu" :style="{ left: left + 'px', top: top + 'px'}">
        <ul>
            <li @click="UpdateItemClick()">修改流程</li>
            <li @click="CopeItemClick('Option 2')">复制流程</li>
            <li @click="DeleteItemClick('Option 3')">删除流程</li>
        </ul>
    </div>

</template>

import {
    defineProps,ref,reactive