vue3 @command 使用方法

在 Vue 3 中，如果你想在模板中使用 @command 事件处理方式，通常是在使用一些基于 Vue 3 的 UI 组件库时遇到的场景，比如 Element Plus 或 Vuetify。在这些组件库中，@command 通常用于处理例如菜单项选择、下拉列表选择等场景中的命令事件。

示例 1：Element Plus 中的 Dropdown 菜单

假设你正在使用 Element Plus，并且想要在 Dropdown 菜单中选择项时执行一些操作。

首先，确保你已经安装并引入了 Element Plus：

npm install element-plus --save

在你的 Vue 组件中引入并注册 Element Plus：

import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
import 'element-plus/dist/index.css';
 
export default {
  components: {
    ElDropdown,
    ElDropdownMenu,
    ElDropdownItem
  }
}

然后，在模板中使用 Dropdown 组件，并监听 @command 事件：

示例 2：Vuetify 中的 Menu（类似场景）

如果你在使用 Vuetify，处理类似的事件会有些不同，但基本思路相同。首先，确保安装并引入 Vuetify：

npm install vuetify@next --save

在你的 Vue 组件中引入并注册 Vuetify：

import { createVuetify } from 'vuetify';
import 'vuetify/styles'; // 确保导入样式文件，根据你的项目结构可能需要调整路径
import * as components from 'vuetify/components'; // 引入所有组件（可选）
import * as directives from 'vuetify/directives'; // 引入所有指令（可选）
 
const vuetify = createVuetify({ components, directives }); // 创建 Vuetify 实例（根据你的项目配置可能需要调整）

在模板中使用 Vuetify 的  组件并监听事件：