满口金牙 2022-07-09 15:06 采纳率: 91.3%
浏览 41
已结题

Vue3 这里第一次载入时,插槽不显示

问题描述: 这里第一次载入时,插槽不显示, menuTitle值 怎么在载入时得到呢?

<template>
  <div v-if="visible" id='curr-meun' class="meun-out-div">
    <!-- 菜单 导航栏, 点击导航显示不同的 内容区-->
    <div class="nav-title">
      <span v-for="item in props.navData" :key="item.id" :id="item.id" @click="navSelect($event)"
        :class="item.is_active ? 'nav-active' : 'nav-not-active'">
        {{ $t(item.text) }}
      </span>
    </div>
    <!-- 菜单内容区-->
    <!-- 父组件传过来 多个插槽, 且插槽名与 数组 props.navData 的index 相同 -->
    <!-- @click="navSelect($event)"  获取menuTitle值 来    选择显示的插槽 -->
    <div v-if="menuTitle" >
      <!-- 问题是:  这里第一次载入时,  插槽不显示 -->
      <slot :name="menuTitle"></slot> <!-- @click="navSelect($event)"后 插槽可以正常显示-->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
const props = withDefaults(defineProps<Props>(), {
// 父组件传过来菜单 参数的格式
  navData: () => [{ id: '1', text: 'fontStyle', is_active: true }], 
  visible: false,
})
// menuTitle 这里已经给了默认值.
const menuTitle = ref<string>(props.navData.findIndex((item) => item.is_active).toString())
function navSelect(event: any) {
  menuTitle.value = event.target.id // 点击的对象id 值,和具名插槽名一致
  for (let i of props.navData) {  // 把点击的,is_active数据更新为true
    if (i.id !== event.target.id) {
      i.is_active = false
    } else {
      i.is_active = true
    }
  }
}
</script>




  • 写回答

2条回答

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

      • 系统已结题 7月18日
      • 已采纳回答 7月10日
      • 创建了问题 7月9日

      悬赏问题

      • ¥15 数据库原理怎么从文字描述中的句子推出(分析)函数依赖?
      • ¥15 yoj获取密码 队列 解密 C语言
      • ¥15 想要使用有序logistic模型,因变量收集结果为以下,可以继续分析吗?
      • ¥15 C语言的问题 求尽快解答一下
      • ¥15 sql相关子查询的一道选择题
      • ¥15 关于图像检测的问题#
      • ¥15 用cemu8086编写代码
      • ¥15 C语言写简单停车场管理系统怎么能最通俗易懂?
      • ¥15 mcisendcommand播放音乐堆栈调用异常
      • ¥15 下载的vscode无法运行代码