如何在Vue Composition API中加载已安装组件（vue3-burger-menu示例）

在Composition API中使用vue3-burger-menu的Slide组件其实很简单，两种常见场景的实现方式如下：

1. 使用<script setup>语法糖（推荐） #

这是Vue3中最常用的Composition API写法，导入组件后无需手动注册，直接在模板中使用即可：

<script setup>
import { Slide } from 'vue3-burger-menu'
// 无需额外注册组件
</script>

<template>
  <!-- 直接使用Slide组件 -->
  <Slide>
    <!-- 这里放你的菜单内容 -->
    <div>首页</div>
    <div>我的收藏</div>
    <div>设置</div>
  </Slide>
</template>

<style>
/* 必须引入组件样式，否则动画和布局会异常 */
@import 'vue3-burger-menu/dist/vue3-burger-menu.css';
</style>

2. 使用setup函数（非语法糖） #

如果你的代码没有用<script setup>，可以在组件选项中同时声明components和setup函数：

<script>
import { Slide } from 'vue3-burger-menu'
import { ref } from 'vue'

export default {
  components: { Slide }, // 注册组件
  setup() {
    // 这里写你的Composition API逻辑
    const isOpen = ref(false)
    return { isOpen }
  }
}
</script>

<template>
  <Slide :is-open="isOpen">
    <!-- 菜单内容 -->
  </Slide>
</template>

<style>
@import 'vue3-burger-menu/dist/vue3-burger-menu.css';
</style>

注意：不管哪种写法，都要记得导入组件对应的CSS文件，否则菜单的滑动动画和基础布局都不会正常工作。

内容的提问来源于stack exchange，提问作者Young Mamba