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>

当前回答

组件的本机事件不能直接从父元素访问。相反，你应该尝试v-on:点击。native="testFunction"，或者你也可以从Test组件发出一个事件。像v:点击= " $发出(点击)”。

2018-06-04 20:42:12

其他回答

如果你想监听组件根元素上的本机事件，你必须使用.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

使用@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

我认为$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

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

2018-06-04 20:42:12

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

推荐文章

最新文章

标签