Question

所以我有一个Vue2应用程序。我创建了一个组件＆＃34; u-button＆＃34;

当我导入它并在另一个组件中使用它时，我希望能够为它添加一个单击功能。但是目前它在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函数添加到其中。但我想知道是否有更好的方法？我不想使用事件来做到这一点，因为它会很快变得混乱。

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

Answer 1

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

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

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

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

如何在Vue

1 个答案: