Vue中的自定义属性，在事件委派和编程式导航路由传参时的作用

最新推荐文章于 2024-09-30 03:35:25 发布

m0_67293763

最新推荐文章于 2024-09-30 03:35:25 发布

阅读量275

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_67293763/article/details/128541875

版权

在Vue中，可以通过在标签上添加自定义属性如data-categoryName和data-categoryId，然后通过event.target.dataset获取这些属性的值，用于路由传参。同时，这种自定义属性也可在事件委派时作为筛选条件，触发特定的事件处理，例如根据属性值跳转至/search页面并传递查询参数。

摘要由CSDN通过智能技术生成

1、可以在vue的标签中添加自定义属性：xxx ，可以在事件的默认传参event中的event.target.dataset找到添加的自定义属性，获得自定义属性和它的值，所以自定义属性可以用来路由传参。

<a :data-categoryName="c1.categoryName" :data-categoryId="c1.categoryId" href="javascript:;">{{ c1.categoryName }}</a>

2、在事件委派的时候可以利用自定义属性来筛选拥有自定义属性的标签来触发事件。

let {categoryname,categoryid} = event.target.dataset
        if(categoryname,categoryid){
          this.$router.push({
            path:'/search',
            query:{
              name:categoryname,
              id:categoryid             
            }
          })
        }