vue三级导航栏利用自定义属性data-*和事件委派优化

如上图所示，标签很多，因此可以利用事件委派来优化，也就是给父标签添加click监听，利用自定义属性data-*为每个标签设置自定义属性，具体代码如下

<template>
  <div class="type-nav">
    <div class="container">
      <div @mouseleave="yinIt" @mouseenter="showIt">
        <h2 class="all">全部商品分类</h2>
        <transition name="sort">
          <div class="sort" v-show="showItem">
            <!-- 此处添加click监听 -->
            <div class="all-sort-list2" @click="toSearch">
              <div
                class="item"
                v-for="(c1, index) in categoryList"
                :key="c1.categoryId"
              >
                <h3
                  :class="{ c: current === index }"
                  @mouseenter="
                    current = index;
                    moveInItem(index);
                  "
                >
                  <!-- <a href="javascript:;" @click="pushdata({categoryName:c1.categoryName,category1Id:c1.categoryId})">{{ c1.categoryName }}</a> -->
                  <!-- 一级标签，动态添加两个自定义属性:data-categoryName和:data-category1Id -->
                  <a
                    href="javascript:;"
                    :data-categoryName="c1.categoryName"
                    :data-category1Id="c1.categoryId"
                    >{{ c1.categoryName }}</a
                  >
                </h3>
                <div class="item-list clearfix">
                  <div class="subitem">
                    <dl
                      class="fore"
                      v-for="c2 in c1.categoryChild"
                      :key="c2.categoryId"
                    >
                      <dt>
                        <!-- <a href="javascript:;" @click="pushdata({categoryName:c2.categoryName,category2Id:c2.categoryId})">{{ c2.categoryName }}</a> -->
                         <!-- 二级标签，动态添加两个自定义属性:data-categoryName和:data-category2Id -->
                        <a
                          href="javascript:;"
                          :data-categoryName="c2.categoryName"
                          :data-category2Id="c2.categoryId"
                          >{{ c2.categoryName }}</a
                        >
                      </dt>
                      <dd>
                        <em v-for="c3 in c2.categoryChild" :key="c3.categoryId">
                          <!-- <a href="javascript:;" @click="pushdata({categoryName:c3.categoryName,category3Id:c3.categoryId})">{{ c3.categoryName }}</a> -->
                            <!-- 三级标签，动态添加两个自定义属性:data-categoryName和:data-category3Id -->
                          <a
                            href="javascript:;"
                            :data-categoryName="c3.categoryName"
                            :data-category3Id="c3.categoryId"
                            >{{ c3.categoryName }}</a
                          >
                        </em>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>
      <nav class="nav">
        <a href="###">服装城</a>
        <a href="###">美妆馆</a>
        <a href="###">尚品汇超市</a>
        <a href="###">全球购</a>
        <a href="###">闪购</a>
        <a href="###">团购</a>
        <a href="###">有趣</a>
        <a href="###">秒杀</a>
      </nav>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import throttle from "lodash/throttle";

export default {
  name: "TypeNav",
//事件委托
    toSearch(event) {
      // let query={categoryName}
      // category1Id?query.category1Id=category1Id:""
      // category2Id?query.category2Id=category2Id:""
      // category3Id?query.category3Id=category3Id:""
      // 		 this.$router.push({
      // 			 name:'Search',
      // 			 query
      // 		 })
      // console.log(event.target.dataset);
			let location={name:'Search'}
			const {msg}=this.$route.params
			msg?location.params={msg}:""
      // 自定义属性会被收集到dataset中,格式变为小写
      const { categoryname, category1id, category2id, category3id } =
        event.target.dataset;
        // 收集query参数
      let query = { categoryName: categoryname };
      category1id ? (query.category1Id = category1id) : "";
      category2id ? (query.category2Id = category2id) : "";
      category3id ? (query.category3Id = category3id) : "";
          location.query=query
          //路由跳转
					if(this.$route.path!=='/'){
						 this.$router.replace(location);
					}else{
              this.$router.push(location);
					}
    },
    //拿到vuex中三级分类数据
  computed: {
    ...mapState({
      categoryList: (state) => state.home.baseCategoryList,
    }),
  },
};
</script>

以上代码利用父节点click监听传递event，利用event.target.dataset收集自定义属性，从而从自定义属性中拿到对应的分类名和分类id，然后作为query参数传递。

标签：vue,categoryName,自定义,dataset,location,query,data,event
来源： https://blog.csdn.net/qq_43176127/article/details/120484144