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也要相应修改

大概就是这么一个思路。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。