问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

关于标签上的事件绑定生效？

头像
请你学习
    1101782

    在标签上绑定click事件，当事件内直接写表达式时，报错
    image.png

    image.png
    当click事件绑定一个方法时，就可以正常跳转路由
    image.png

    image.png
    是因为针对标签和方法编译时期的不同吗？

    前端javascriptvue.jshtml5
    阅读 249
    avatarAI BotBETA

    在 Vue 模板中直接写表达式时，上下文环境与组件方法不同：

    1. 直接表达式场景
      @click="router.push('/')" 会报错的原因是：
    2. 模板中默认只能访问组件实例的属性（this.xxx）
    3. 但 router 并没有挂载到组件实例的根属性上
    4. 方法调用场景
      @click="handleClick" 正常工作的原因是：
    5. 方法内部的 this 指向组件实例
    6. 通过组件实例可以访问注入的 $router 对象
    7. 正确写法应该是 this.$router.push('/')

    正确写法应该选择：

    <!-- 方式1：使用组件方法 -->
<button @click="handleClick">跳转</button>

<!-- 方式2：显式使用 $router（模板中） -->
<button @click="$router.push('/')">跳转</button>

    本质原因是 Vue 的模板编译机制：

    • 直接表达式会被包装成函数，其作用域链与组件实例绑定方式不同
    • 方法调用会自动绑定 this 上下文到组件实例
    • 推荐始终通过 this.$router 访问路由实例来保证上下文正确性

    建议采用第二种写法时注意：

    1. 确保已经正确注入 router 实例（createApp().use(router)）
    2. 模板中直接访问 $router 是 Vue Router 自动挂载的快捷方式
    3. 复杂逻辑仍推荐使用组件方法保持模板简洁
    4 个回答
    得票最新
    头像
    along
      3k1430

      vue中元素标签上绑定事件可以这样写：

      <div @click="() => { //执行逻辑 }"></div>
      头像
      干练的钥匙扣_ba3U6T
        21

        直接把this去掉就行了

        头像
        陟上晴明
          21.4k144991

          因为没有 this ，像下面这样调整一下就好了。

          - <el-dropdown-item icon="el-icon-setting" @click.native="this.$router.push('/user-info')" />
+ <el-dropdown-item icon="el-icon-setting" @click.native="$router.push('/user-info')" />

          但是OP你既然知道在 template 里面绑定 click 时去掉了 this，但是使用 $router 的时候没有去掉呢？

          头像
          Devlive开源社区
            6221415

            因为直接在标签上使用内联表达式时，Vue 会在特定上下文中编译这个表达式，而在这个上下文中 this 可能不是组件实例。

            改成了使用 @click.native="click" 并在方法中定义 click() 函数，然后在函数内部使用 this.$router.push('/user-info')，这样是可以正常工作的。因为在方法中，this 正确地指向了组件实例，所以可以访问到 $router 属性。

            如果确实想使用内联表达式，可以使用箭头函数来保持 this 的正确引用：

            <el-dropdown-item icon="el-icon-setting" @click.native="() => this.$router.push('/user-info')">
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题