时间戳

首页 > 解决方案 > Vue中如何为导入的组件添加点击功能

vuejs2 - Vue中如何为导入的组件添加点击功能

问题描述

所以我有一个 Vue2 应用程序。我创建了一个组件“u-button”

当我导入它并在另一个组件中使用它时，我希望能够向它添加点击功能。然而，目前它在 u-button 组件而不是它正在使用的组件上寻找一个功能。

例如，在下面如果我点击第一个按钮没有任何反应，如果我点击第二个按钮我会得到控制台日志。

<template>
    <div>
        <u_button @click="clicked">Click me</u_button>
        <button @click="clicked">Click me</button>
    </div>
</template>

<script>
    import u_button from '../components/unify/u_button'

    export default {
        components: {
            u_button
        },
        methods: {
            clicked() {
                console.log("Working!");
            }
        }
    }

</script>

但是，如果我在 u-button 组件上添加一个方法，那么它会调用它。那么我怎样才能让我的下面的例子工作呢？我唯一能想到的就是将它包装在另一个 div 中并向其中添加点击功能。但我想知道是否有更好的方法？我也不想使用事件来做到这一点，因为这很快就会变得混乱。

正如您可以想象的那样，拥有一个可重复使用的按钮，单击该按钮时总是执行相同的功能，这有点毫无意义。

标签： vuejs2

解决方案

这是因为组件的性质，例如，如果我们有一个（虚拟）iframe 组件，其中有一个按钮，我们想检测click它上面的事件，我们可能会命名事件 click 并在父组件中监听它；因此，Vue 在 Vue 中引入了一个称为事件修饰符的功能，我们有修饰符（您可以在此处.native阅读有关 Vue 修饰符的更多信息）

现在，为了让你的代码工作，你应该像这样添加一个.nativeafter @click：

<u_button @click.native="clicked">Click me</u_button>

顺便说一句，最好为自己制定一个命名约定，当您的项目变得更大时它会变得很方便。

推荐阅读