vue 自定义属性与事件委托

//当一段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