Vue下拉菜单组件化开发

最新推荐文章于 2024-09-18 15:46:42 发布

Hgiao

最新推荐文章于 2024-09-18 15:46:42 发布

阅读量521

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/Hgiao/article/details/109628067

版权

本文介绍了在Vue项目中实现下拉菜单组件化的步骤。首先，在components/common目录下创建dropdown、dropdownMenu和dropdownItem组件。dropdown作为一级盒子，仅设置插槽；dropdownMenu作为二级盒子，dropdownItem则是其内容部分。接着在App.vue和main.js中引入并使用这些组件，完成基本的下拉菜单功能。虽然实现简单，但展示了Vue组件化的基础应用。

摘要由CSDN通过智能技术生成

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

第一步：在项目中专门创建一个放置自定义组件的文件夹（直接components底下的common中）
在这里插入图片描述
dropdown.vue 为一级盒子

dropdownMenu.vue 为二级盒子

dropdownItem.vue 为二级盒子内容

第二步 ：

对dropdown.vue的操作

<template>
  <div class="box">
     <!-- 给按钮加点击事件  -->
    <div @click="showM">
          <!-- 一级按钮  -->
      <slot name="title"></slot>
    </div>
        <!--  二级盒子  -->
        
        <!--  加v-if操作 隐藏显示效果 -->
    <slot v-if="show" name="dropdown"></slot>
  </div>
</template>

<script>
  export default {
   
    name: "dropdown",
    data() {
   
      return {
   
        // 默认二级盒子关闭
        show: false
      }
    },
    methods: {
   
      showM() {
   
        this.show = !this.show
      },
      commitClick(value) {
   
      // 向父级暴露dropdown事件，并把值传入
        this.$emit('change-item',value)
      }
    }
  }
</script>