外面引用组件写click无效解决方案

最新推荐文章于 2023-10-10 15:03:26 发布

原创最新推荐文章于 2023-10-10 15:03:26 发布 · 274 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html

vue 专栏收录该内容

1 篇文章

订阅专栏

本文揭示了在Vue组件中正确使用click等事件监听的秘诀——务必添加'native'前缀，以确保原生事件的捕获。理解native属性对于避免无效事件至关重要。

在 Vue 开发中自定义组件之后，需要往组件身上添加 click 之类的一些操作事件，但是加上之后会无效。

原因是因为没有加上 native,官网对于 native 的解释为:

.native - 监听组件根元素的原生事件。
1
因此正确的写法是：

// 无效写法

            <MenuCard
              shadow
              :color="infor.color"
              :icon="infor.icon"
              :icon-size="18"
              @click="ShortcutClick"
            >
              <p>
                {{ infor.title }}
              </p>
            </MenuCard>

// 正确写法

            <MenuCard
              shadow
              :color="infor.color"
              :icon="infor.icon"
              :icon-size="18"
              @click.native="ShortcutClick"
            >
              <p>
                {{ infor.title }}
              </p>
            </MenuCard>