如何向Vue中导入的组件添加单击功能

Question

所以我有一个Vue2应用程序。我已经创建了一个html" target="_blank">组件"u按钮"

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

例如，在下面，如果我点击第一个按钮什么也没发生，如果我点击第二个按钮，我得到控制台日志。

<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按钮组件上添加一个方法，那么它将调用该方法。那么，我怎样才能让我下面的例子起作用呢？我唯一能想到的就是将它包装到另一个div中，并将click函数添加到该div中。但我想知道是否有更好的方法？？我也不想用事件来做这件事，因为它很快就会变得一团糟。

你可以想象有一个可重复使用的按钮，当点击时总是执行相同的功能有点毫无意义。

Answer 1

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

现在，要使代码正常工作，您应该在@单击后添加.native，如下所示：

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

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