Vue v-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>
一个pp.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>
共有3个答案
这是“Neps”的答案，但有细节。
注意：@Saurabh的答案更适合如果你不想修改你的组件或无法访问它。
组件是复杂的。一个组件可以是一个小的花式按钮包装器，另一个组件可以是一个包含大量逻辑的整个表。当绑定v-model或使用v-on时，Vue不知道您希望得到什么，所以所有这些都应由组件的创建者处理。
根据Vue文档，$emit将事件传递给父级。文档中的示例：
主文件
<blog-post
@enlarge-text="onEnlargeText"
/>
组成部分
<button @click="$emit('enlarge-text')">
Enlarge text
</button>
（@是v-on的缩写）
组件处理本机单击事件并发出父级的@放大文本=“…”
放大文本可以替换为单击，使其看起来像我们正在处理本机单击事件：
<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>
我认为，$emit函数更适合我认为您所要求的功能。它将您的组件与Vue实例分开，以便在许多上下文中可重用。
// Child component
<template>
<div id="app">
<test @click="$emit('test-click')"></test>
</div>
</template>
用超文本标记语言
// Parent component
<test @test-click="testFunction">
如果您想在组件的根元素上监听本机事件，您必须为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>
参考阅读更多关于本地事件
-
问题内容： 我正在将多页php + jquery网站转换为单页角度应用程序。但是我已经用jquery编写了很多代码，因此只打算将php换成与路由等有关的角度。 我遇到的一个我无法弄清楚的问题是，在转换停止工作之前，我一直用尽的jquery click事件。如果更改代码以使其通过ng- click触发，则它将起作用，即使我从控制台调用该函数也是如此。jQuery正常工作，我在提到的函数中放了一些jQ
-
问题内容： 我实现了Android 与。在这里，我有一个问题，当我单击列表项时，当闪烁的颜色也没有到来时，即橙色，则不执行任何操作。因此，您对我的问题的这个答案有任何想法吗？ 我也将此代码放入Main ListActivity。 问题答案： 您首先要注意的是，每当元素中存在诸如按钮之类的Clickable元素时，它们都会控制click事件。因此，您将没有机会接受click事件。 您要做的只是将Li
-
问题内容： 我在用 单击到容器上的按钮，但随后进行了ajax调用，并且内容使用新内容进行了更新，然后当我尝试单击它时将无法工作…单击该按钮时，将不会返回任何内容。 我什至试过 要么 我该如何运作？ 编辑： 我的HTML： 问题答案： 应该以这种方式完成。 如果您的容器在ajax请求期间没有更改，则性能更高： 始终将委托事件绑定到将包含动态元素的最接近的静态元素。
-
问题内容： 我有一段jQuery，它会循环遍历给定div（）中的每个元素，并且每次单击范围时都会发出JavaScript警报。如果的值是静态的，则效果很好。 但是，如果我使用如下代码： jQuery代码不会触发。奇怪的是 我的问题是：我的Click事件是否不适用于动态创建的项目？我想我必须在我的文档中添加准备好的内容或心跳脚本（每100毫秒触发一次）来关联事件？ 问题答案： 做这个： 其中，在其中
-
问题内容： 我做了一个基于Java Swing的应用程序。 在我的应用程序上，如果我在JFrame上的任何地方单击，则我的右键单击不起作用？ 我没有设置那样的东西..那为什么不起作用？ 基本上我的键盘不起作用，然后我尝试复制-然后使用鼠标粘贴数据，然后我才知道…我的右键单击不适用于我的应用程序的任何区域… 问题答案： 右键单击效果很好-在Swing中，不要获取您在其他应用中习惯的上下文菜单是很正常
-
我有两门课。我的基层： 还有我的另一门课。这个类扩展了BaseRequest类。 当我尝试创建映射器将我的Add Class转换为其他类时： 当我运行我的构建时，我收到了这个错误： 错误：（22,13）java:源参数中不存在名为“dateTransaction”的属性。你是说“空”吗？