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

【问题标题】：How to add a click function to an imported component in VueVue中如何为导入的组件添加点击功能
【发布时间】：2018-10-15 04:05:49
【问题描述】：

所以我有一个 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 中并将点击功能添加到其中。但我想知道是否有更好的方法？我也不想使用事件来执行此操作，因为这很快就会变得混乱。

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

【问题讨论】：

使用<u_button @click.native="clicked">
Vue v-on:click does not work on component的可能重复

标签： vuejs2

【解决方案1】：

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

现在，为了让您的代码正常工作，您应该在 @click 之后添加一个 .native，如下所示：

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

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

【讨论】：