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