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

其他回答

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

有点啰嗦，但我是这样做的:

@click=“$emit（'点击'， $event）”

更新:由@sparkyspider添加的示例

<div-container @click="doSomething"></div-container>

在div-container组件中…

<template>
  <div @click="$emit('click', $event);">The inner div</div>
</template>

2018-06-22 20:46:02

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

2018-06-04 20:42:12

从文档中可以看到:

由于JavaScript的限制，Vue无法检测到对数组的以下更改:

当你直接用索引设置一个项时，例如vm。items[indexOfItem] = newValue .使用实例当你修改数组的长度时，例如vm.items.length = newLength

以我为例，我是在从Angular迁移到VUE时遇到这个问题的。Fix很简单，但是很难找到:

setValue(index) {
    Vue.set(this.arr, index, !this.arr[index]);
    this.$forceUpdate(); // Needed to force view rerendering
}

2020-06-10 11:52:29

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

推荐文章

最新文章

标签