【SDU项目实训2019级】router-link的:to 和@click谁先执行

╰+攻爆jí腚メ 2023-09-28 09:13 24阅读 0赞

在写下面的代码的时候：

<div class="section-title">
    
                      <router-link tag="a" :to="{path: '/contentAll',query:{id:tableData.contentId}}" @click="postRecord(tableData.contentId)" class="sTitle-sub-head" style="font-size: 18px;color: #606060">—展开—</router-link>
    
                    </div>

由于点击这个router-link会触发两个不同的事件，一个是href属性所对应的链接，一个是@click，然后我发现，我每次点击，并不会触发我的@click里面调用的js函数，搜了一下，然后发现：

原因：router-link会阻止click，mouseover事件，只用click不用native，事件不会触发。

根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。（转发的[router-link 点击事件 - 掘金 (juejin.cn)][router-link _ - _ _juejin.cn]）

然后将@click事件加上了native：

<div class="section-title">
    
                      <router-link tag="a" :to="{path: '/contentAll',query:{id:tableData.contentId}}" @click.native="postRecord(tableData.contentId)" class="sTitle-sub-head" style="font-size: 18px;color: #606060">—展开—</router-link>
    
                    </div>

能在跳转前执行@click对应的js函数了。然后将该数据向后端发送request请求，存到数据库。

[router-link _ - _ _juejin.cn]: https://juejin.cn/post/6979450882807037989

发表评论取消回复

表情：

评论列表（有 0 条评论，24人围观）

还没有评论，来说两句吧...

相关阅读

相关【SDU项目实训2019级】学习过程记录——vue框架2

SDU项目实训2019级继续vue框架的学习~ vue表单 v-model 会根据控件类型自动选取正确的方法来更新元素。双向数据绑定。 input，textare

梦里梦外;/ 2023年09月30日 09:57/ 0 赞/ 99 阅读

相关【SDU项目实训2019级】学习过程记录——vue框架1

SDU项目实训2019级本次项目实训在整个项目中负责的是前端的设计和编写，以前写bs架构的项目的时候并没有使用过vue框架，在本次项目中前端使用vue，记录学习和编写过程。

ゞ浴缸里的玫瑰/ 2023年09月30日 09:56/ 0 赞/ 107 阅读

相关【SDU项目实训2019级】客户端服务端实现token保存用户状态信息（redis数据库）

中医汉英语料库资源平台：实现用户状态信息的保存（是否是登录状态） token实现思路 1.用户登录校验，校验成功后就返回Token给客户端。 2.客户端收到数据后保存在客户端

朴灿烈づ我的快乐病毒、/ 2023年09月29日 14:55/ 0 赞/ 115 阅读

相关【SDU项目实训2019级】redis学习记录1

1.redis是什么 redis是互联网技术领域使用最为广泛的存储中间件，\[Remote Dictionary Service\]->\[远程字典服务\]，国内外很多大

阳光穿透心脏的1/2处/ 2023年09月29日 14:40/ 0 赞/ 115 阅读

相关【SDU项目实训2019级】个人主页页面展示+个人总结

首先是个人主页页面展示，与用户信息相关，会展示注册时填写的用户名、手机号、职业、专业、感兴趣的词条，以及会展示用户个人搜索记录，点击搜索过的词条会进行相应的跳转，起到了更便捷的

以你之姓@/ 2023年09月28日 09:24/ 0 赞/ 109 阅读

相关【SDU项目实训2019级】router-link的:to 和@click谁先执行

在写下面的代码的时候： <div class="section-title"> <router-link tag

╰+攻爆jí腚メ/ 2023年09月28日 09:13/ 0 赞/ 25 阅读

相关【SDU项目实训2019级】前端设计——推荐界面，存储用户职业、专业、感兴趣的词

完成注册之后，会让用户选择自己与中医相关的职业、专业、以及感兴趣的热词/领域词，以便后续来实现用户推荐排序功能：根据用户选择，保存用户选择的兴趣词，向后端传送该数据，后端保

朱雀/ 2023年09月28日 09:06/ 0 赞/ 25 阅读

相关【SDU项目实训2019级】（超详细）阿里云服务器部署与环境配置之后端vue项目

目录 1.在服务器上下载安装nginx 2.导出vue项目 3.部署前端 -------------------- 我们的项目是前端vue+后端springboot

古城微笑少年丶/ 2023年09月28日 08:34/ 0 赞/ 78 阅读

相关【SDU项目实训2019级】（超详细）阿里云服务器部署与环境配置之后端springboot项目

目录 1.购买云服务器 2.使用本地应用连接到服务器 3.项目环境配置 1.配置Java的jdk 2.redis安装和mongodb安装 3.后端springbo

矫情吗；*/ 2023年09月28日 08:34/ 0 赞/ 80 阅读

相关【SDU项目实训2019级】前端和后端实现手机短信验证码登录和注册功能

目录 1.前端登录页面手机号验证码登录页面： 2.前端获取验证码的函数： 3.后端获取验证码代码 4.前端登录的函数： 5.后端登录的实现 6.注册功能前后端的实现

我会带着你远行/ 2023年09月28日 08:33/ 0 赞/ 110 阅读