如何使用TypeScript和Vue.js 3高亮当前激活的菜单项？

要实现菜单项的激活高亮，无需手动写v-if(selected)，可以通过Tree组件的内置属性结合父子组件状态传递来完成，具体步骤如下：

1. 改造MenuTreeView子组件 #

在子组件中维护选中节点的状态，绑定到Tree组件的selectedKeys属性，同时在节点选中时更新状态并通知父组件：

<template>
  <Tree 
    :value="items" 
    filterPlaceholder="Suche" 
    :expandedKeys="expandedKeys" 
    filterMode="lenient" 
    :filter="filter"
    selectionMode="single" 
    @nodeSelect="onNodeSelect"
    :selectedKeys="selectedKeys" <!-- 绑定选中节点的key集合 -->
  ></Tree>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps(['items', 'filter', 'expandedKeys', 'defaultSelectedKey']);
const emit = defineEmits(['selected']);

// 单选模式下用数组维护选中key
const selectedKeys = ref(props.defaultSelectedKey ? [props.defaultSelectedKey] : []);

const onNodeSelect = (event) => {
  // 更新选中状态
  selectedKeys.value = [event.node.key];
  // 把选中节点传递给父组件
  emit('selected', event.node);
};
</script>

2. 父组件同步状态 #

如果需要默认激活某个菜单项，父组件可以传递初始选中key，同时监听选中事件更新本地状态：

<template>
  <MenuTreeView 
    @selected="collapsedMenuSelected" 
    :items="filteredFirstLevelNavigation" 
    :filter="false"
    :default-selected-key="activeMenuKey" <!-- 可选：设置默认选中项 -->
  />
</template>

<script setup>
import { ref } from 'vue';

// 根据业务逻辑设置当前激活的菜单项key，比如从路由获取
const activeMenuKey = ref('your-target-key');

const collapsedMenuSelected = (selectedNode) => {
  // 处理选中后的逻辑，比如更新路由、保存状态
  activeMenuKey.value = selectedNode.key;
};
</script>

3. 自定义高亮样式（可选） #

如果组件默认高亮样式不符合需求，可通过CSS自定义：

.p-tree .p-tree-node.p-highlight {
  background-color: #e3f2fd;
  border-left: 3px solid #1976d2;
}

完成以上设置后，Tree组件会自动高亮选中的节点，同时父子组件状态保持同步，实现激活项的高亮效果。

内容的提问来源于stack exchange，提问作者Roland Tömösközi