Vue v-on:单击对组件无效

我试图在组件内使用on单击指令，但它似乎不起作用。当我点击组件时，什么都没有发生，当我应该得到一个“测试点击”在控制台中。我在控制台没有看到任何错误，所以我不知道我做错了什么。

index . html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vuetest</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

App.vue

<template>
  <div id="app">
    <test v-on:click="testFunction"></test>
  </div>
</template>

<script>
import Test from './components/Test'

export default {
  name: 'app',
  methods: {
    testFunction: function (event) {
      console.log('test clicked')
    }
  },
  components: {
    Test
  }
}
</script>

测试。Vue(组件)

<template>
  <div>
    click here
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

当前回答

我认为$emit函数更适合你的要求。它将组件与Vue实例分离，以便在许多上下文中可重用。

// Child component
<template>
  <div id="app">
    <test @click="$emit('test-click')"></test>
  </div>
</template>

在HTML中使用

// Parent component
<test @test-click="testFunction">

2017-12-02 00:38:19

其他回答

使用@click的一个用例。本机是当您创建自定义组件并希望侦听自定义组件上的单击事件时。例如:

#CustomComponent.vue
<div>
  <span>This is a custom component</span>
</div>

#App.vue
<custom-component @click.native="onClick"></custom-component>

@click。当地人总是在这种情况下工作。

2021-10-02 08:03:58

这是@Neps的答案，但有细节。

注意:如果你不想修改你的组件或者没有权限访问它，@Saurabh的答案更适合。

为什么@click不能正常工作?

组件是复杂的。一个组件可以是一个漂亮的小按钮包装器，另一个组件可以是一个包含大量逻辑的完整表。当绑定v-model或使用v-on时，Vue不知道你到底期望什么，所以所有这些都应该由组件的创建者处理。

如何处理点击事件

根据Vue文档，$emit将事件传递给父节点。来自docs的例子:

主文件

<blog-post
  @enlarge-text="onEnlargeText"
/>

组件

<button @click="$emit('enlarge-text')">
  Enlarge text
</button>

(@是v-on的缩写)

组件处理本机单击事件并发出父元素的@enlarge-text="…"

放大文本可以替换为点击，使它看起来像我们在处理一个本地点击事件:

<blog-post
  @click="onEnlargeText"
></blog-post>

<button @click="$emit('click')">
  Enlarge text
</button>

但这还不是全部。$emit允许将特定值与事件一起传递。在本机单击的情况下，值为MouseEvent(与Vue无关的JS事件)。

Vue将该事件存储在$event变量中。因此，最好在一个事件中发出$event，以创建本机事件使用的印象:

<button v-on:click="$emit('click', $event)">
  Enlarge text
</button>

2019-01-22 14:18:08

App.vue

<div id="app">
    <test @itemClicked="testFunction($event)"/>
</div>

Test.vue

<div @click="$emit('itemClicked', data)">
     click here
</div>

2022-02-22 23:14:47

如果你想监听组件根元素上的本机事件，你必须使用.native修饰符来代替v-on，如下所示:

<template>
  <div id="app">
    <test v-on:click.native="testFunction"></test>
  </div>
</template>

或者用简写的方式，正如评论中建议的那样，你也可以这样做:

<template>
  <div id="app">
    <test @click.native="testFunction"></test>
  </div>
</template>

参考阅读有关本机事件的更多信息

2017-01-05 03:29:41

我认为$emit函数更适合你的要求。它将组件与Vue实例分离，以便在许多上下文中可重用。

// Child component
<template>
  <div id="app">
    <test @click="$emit('test-click')"></test>
  </div>
</template>

在HTML中使用

// Parent component
<test @test-click="testFunction">

2017-12-02 00:38:19

Vue v-on:单击对组件无效

推荐文章

最新文章

标签