标签：vue categoryName 自定义 cname query local event 属性

//当一段vue模板中，多个子级元素需要绑定同一个click相同的事件时，我们可以利用事件委托，将事件委托给其父元素。

//事件委托的优点：提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。

   <!-- 事件委托 -->
            <div class="all-sort-list2" @click="jumpSearch">
              <div
                class="item"
                v-for="(item, index) in categoryList"
                :key="item.categoryList"
              >
                <h3
                  :class="{ active: index == current }"
                  @mouseenter="activeIndex(index)"
                >
                  <a
                    :data-cname="item.categoryName"
                    :data-c1id="item.categoryId"
                    >{{ item.categoryName }}</a
                  >
                </h3>
                <div
                  :style="{ display: index == current ? 'block' : 'none' }"
                  class="item-list clearfix"
                >
                  <div
                    class="subitem"
                    v-for="(itemTwo, indexTwo) in item.categoryChild"
                    :key="itemTwo.categoryId"
                  >
                    <dl class="fore">
                      <dt>
                        <a
                          :data-cname="itemTwo.categoryName"
                          :data-c2id="itemTwo.categoryId"
                          >{{ itemTwo.categoryName }}</a
                        >
                      </dt>
                      <dd>
                        <em
                          v-for="(
                            itemThree, indexThree
                          ) in itemTwo.categoryChild"
                          :key="itemThree.categoryId"
                        >
                          <a
                            :data-cname="itemThree.categoryName"
                            :data-c3id="itemThree.categoryId"
                            >{{ itemThree.categoryName }}</a
                          >
                        </em>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>

在html中我们 利用 Vue提供的自定义属性来提前绑定我们需要的参数 注意这里 :data-后面的变量名如果是驼峰会自动转小写 例如 Cate 会变成 cate
:data-cname="item.categoryName"  :data-c1id="item.categoryId"



jumpSearch(event) {
      //通过event 拿到目标对象
      let element = event.target;

      //使用event对象.dataset属性获取到自定义属性 并解构
      let { cname, c1id, c2id, c3id } = element.dataset;

      //因为父级元素下有多种元素 所以我们只判断拥有自定义属性的元素才处理业务 
      if (cname) {
        let local = {
          name: "search",
          query: {
            categoryName: cname,
          },
        };
        if (c1id) {
          local.query.category1Id = c1id;
        }
        if (c2id) {
          local.query.category2Id = c2id;
        }
        if (c3id) {
          local.query.category3Id = c3id;
        }

        //如果路由跳转时params有参数也需要整理携带
        if (this.$route.params) {
          local.params = this.$route.params;
        }

        console.log(local, "query整理参数");
        //跳转search
        this.$router.push(local);
      }

标签：vue,categoryName,自定义,cname,query,local,event,属性
来源： https://blog.csdn.net/m0_57547956/article/details/123066491

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