vue3子传父(使用emit)

父组件中写法:

<template>
  <!-- navbar组件，点击头像出下拉框，点击下拉框中的修改密码(navbar子组件将true传给父组件layout,
       绑定的getDialogVisible方法的参就是子组件传过来的值)，
       出修改密码弹窗的组件 
       重要注意点：绑定的变量名dialogVisible一定要跟子组件emit的名字dialogVisibles一样( ctx.emit('dialogVisible',true) )
       
       layout-navbar组件中的下拉框的修改密码项，点击就出修改密码弹窗 <= 这是控制逻辑
       -->
  <layout-navbar @dialogVisible='getDialogVisible' />
  <!-- 修改密码的表单弹窗  -->
  <open-window   v-show = 'dialogVisible'/>
<template>
<script lang="ts">
import LayoutNavbar from '/@/layout/components/navbar.vue'
export default defineComponent({
  name: 'Layout',
  components: {LayoutNavbar},
  setup() {
    const dialogVisible = ref()
    const getDialogVisible = (val)=>{
        dialogVisible.value = val
      //这个操作函数的参数就是emit传过来的值==================================本篇重点========================
      console.log('dialogVisible',val);
    }
    return {
      getDialogVisible,
      dialogVisible     
    }
  }

 layout-navbar 子组件中写法:

<template>
  <div>
    <el-dropdown-menu>
        <el-dropdown-item divided @click="editPassword">修改密码</el-dropdown-item>
        <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
     </el-dropdown-menu>
  </div>
</template>

<script lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { defineComponent, reactive, watch, ref,defineEmits} from 'vue'
import { RouteLocationNormalizedLoaded, useRoute, useRouter } from 'vue-router'
import { updatePassword } from '/@/api/personnel/index'
import icon from '/@/assets/img/icon.png'
export default defineComponent({
  name: 'LayoutNavbar',
  components: {
    LayoutMenubar,
  },
  emits:['dialogVisible'],
  setup(props,ctx) {
    const router = useRouter();
    const editPassword = () => {
      //emit是ctx的一个属性==================================本篇重点========================
      ctx.emit('dialogVisible',true)//dialogVisible控制修改密码弹窗显隐
    }
    
    

    //格式化时间================================================处理时间（小重点）================================================
    const timeData = ref<any>(null);
    // 获取显示时间的 DOM 元素
    const getCurrentTime = () => {
      // 创建一个 Date 对象
      const currentDate = new Date();
      // 获取年份
      const year = currentDate.getFullYear();
      // 获取月份 (注意返回的月份是从 0 开始的，所以需要加 1)
      const month = (currentDate.getMonth() + 1) < 10 ? "0" + (currentDate.getMonth() + 1) : currentDate.getMonth() + 1;
      // 获取日期
      const day =currentDate.getDate() < 10 ? '0'+currentDate.getDate() : currentDate.getDate();
      // 获取小时数
      const hours = currentDate.getHours() < 10 ? '0'+currentDate.getHours() : currentDate.getHours();
      // 获取分钟数
      const minutes = currentDate.getMinutes() < 10 ? '0'+currentDate.getMinutes() : currentDate.getMinutes();
      // 获取秒数
      const seconds = (currentDate.getSeconds() + 1) < 10 ? "0" + (currentDate.getSeconds() + 1) : currentDate.getSeconds() + 1;
      // 获取星期几 (注意返回的星期几是从 0 开始的，所以需要根据需求进行转换)
      const dayOfWeek = currentDate.getDay();
      const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      const weekday = weekdays[dayOfWeek];
      // 将时间显示在页面上
      timeData.value = year + "." + month + "." + day + " " + weekday + " " + hours + ":" + minutes + ":" + seconds
    }
    // 每秒钟获取当前时间
    setInterval(getCurrentTime, 1000);
    const dataNew = route.matched[route.matched.length - 1].meta.title;
    return {
      clickNav,
      navData,
      selectIndex,
      dataNew,
      timeData,
      getMenubar,
      userInfo: getUserInfo,
      changeCollapsed,
      logout,
      ...breadcrumb(route),
      getSetting,
      icon,
      editPassword,
    }
  },
})
</script>

<style lang="postcss" scoped>
.bgTitle {
  width: 100%;
  background: url(../../assets/img/bg.png) no-repeat center/100% 100%;
  height: 5rem;
}

.position_div {
  width: 98%;
  text-align: left;
  background-color: rgb(3, 42, 91);
  color: rgb(26, 131, 248);
  border-radius: 20px;
  margin-top: 5px;

  img {
    display: inline-block;
    width: 18px;
    height: 20px;
    margin-left: 20px;
    margin-top: -3px;
  }

  div {
    display: inline-block;
    height: 2rem;
    line-height: 2rem;
    margin-left: 20px;
    color: white;
    font-weight: 600;
  }
}

.logo {
  width: 350px;
  height: 45px;
  margin: 15px 25px;
  float: left;
  font-size: 26px;
  color: white;
  font-weight: 600;
  letter-spacing: 5px;
  padding-left: 35px;
}

.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.5s;
}

.breadcrumb-enter-from,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all 0.5s;
}

.breadcrumb-leave-active {
  position: absolute;
}

.nav_box {
  display: flex;
  position: absolute;
  left: 24%;
}

.nav_item {
  width: 200px;
  text-align: center;
  color: white;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 5px;
  font-size: 18px;
  height: 70px;
  line-height: 70px;
}

.nav_item:hover{
  background: rgba(84 168 255 / 20%);
}
.selected {
  background: rgba(84 168 255 / 20%);
}
</style>