标签：vue categoryName 自定义 dataset location query data event

如上图所示，标签很多，因此可以利用事件委派来优化，也就是给父标签添加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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。