Vue v-on：单击在组件上不起作用

javascript vue.js vue-component vuejs2

2022-08-30 00:08:44

我正在尝试在组件中使用on click指令，但它似乎不起作用。当我单击该组件时，当我应该在控制台中“单击测试”时，没有任何反应。我在控制台中没有看到任何错误，所以我不知道我做错了什么。

索引.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>

Test.vue （组件）

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

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

答案 1

如果要侦听组件根元素上的本机事件，则必须对使用 .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>

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

答案 2

我认为该功能更适合我认为您所要求的内容。它将你的组件与 Vue 实例分开，以便它可以在很多上下文中重用。$emit

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

在 HTML 中使用它

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