vue2项目之事件委派+编程式路由

事件委派+编程式路由

1、事件委派：如果一个父节点有多个子节点，且多个子节点都需要绑定同一个函数。那么我们应该把事件委派给父节点！！只给父节点添加绑定事件

2、编程式路由：如果通过 v-for 会有多个 router-link 生成，那么我们要取消使用 router-link ，改用编程式路由节约编译时间！！！用绑定事件实现路由跳转

3、事件委派+编程式路由：两个结合用于解决多子节点路由跳转问题 既在父节点中添加绑定事件，在绑定事件中实现路由跳转！！！

设置自定义属性

1、作用：子节点要想在父节点中独一无二必须要加上自定义属性！

2、自定义属性命名方式：data-单词全部小写

:data-itemname="item.categoryName"

3、具体使用：获取节点（e.target） 获取节点自定义属性对象（e.target.dataset）

goSearch(e) {
    
    let itemname = e.target.dataset.itemname; // 普通获取值
    
    let { itemname } = e.target.dataset; // 对象结构获取值
}

案例

使每个 a 标签实现路由跳转

// 父组件未展示

<a href="javascript:void(0);" :data-dataname="item_c_c.categoryName">
    {{item_c_c.categoryName}}
</a>

goSearch(e) {
    let { dataname } = e.target.dataset;

    if(dataname) {
        this.$router.push({
            path: '/search',
            query: { dataname }
        })
    }
}