Vue中下拉菜单组件化开发的示例分析

小编给大家分享一下Vue中下拉菜单组件化开发的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

具体内容如下

搞一个自定义组件，只是一个很简单的下拉菜单，也就是一个思路，整起

第一步：在项目中专门创建一个放置自定义组件的文件夹（直接components底下的common中）

dropdown.vue 为一级盒子

dropdownMenu.vue 为二级盒子

dropdownItem.vue 为二级盒子内容

第二步 ：

对dropdown.vue的操作

对于dropdownMenu仅仅只是把它当作一个盒子，只需要添加一个插槽，把盒子搭好即可

对dropdownItem的操作

接下来对App.vue文件进行操作

在main.js导入组件

import zgDropdown from "@/components/common/dropdown"import zgDropdownMenu from "@/components/common/dropdownMenu"import zgDropdownItem from "@/components/common/dropdownItem"Vue.component('zgDropdownItem',zgDropdownItem)Vue.component('zgDropdown',zgDropdown)Vue.component('zgDropdownMenu',zgDropdownMenu)

app.vue也要相应修改

看完了这篇文章，相信你对"Vue中下拉菜单组件化开发的示例分析"有了一定的了解，如果想了解更多相关知识，欢迎关注行业资讯频道，感谢各位的阅读！