v-on监听器中的Vue $emit不起作用
在Vue中，v-on是一个用于绑定事件监听器的指令。而$emit是Vue实例的一个方法，用于触发自定义事件。在v-on监听器中，可以使用$emit来触发自定义事件，以便在Vue组件之间进行通信。
通常情况下，v-on监听器中的Vue $emit应该可以正常起作用。如果$v-on监听器中的$emit不起作用，可能是以下几个原因：
- 未正确定义自定义事件：在使用$emit之前，首先需要在Vue组件中正确定义自定义事件。可以通过在组件中使用Vue实例的$on方法进行事件监听，或者在组件中使用Vue的事件修饰符来定义事件。
- 错误的事件名称：确保在$v-on监听器中使用的自定义事件名称与$emit中触发的事件名称完全一致。
- 作用域问题：确保在$v-on监听器中使用的$emit方法与触发事件的Vue实例位于同一作用域中。如果在嵌套组件中使用$emit，可以考虑使用.sync修饰符来简化事件传递。
- 组件未正确传递：如果$v-on监听器中的Vue $emit在组件之间不起作用，可能是组件之间未正确传递事件。在父组件中使用子组件时，需要使用v-on指令将子组件的自定义事件绑定到父组件的方法上。
- 其他错误：检查代码中是否存在其他错误，如拼写错误、语法错误等。
在解决$v-on监听器中的Vue $emit不起作用的问题时，可以参考以下步骤：
- 确保在Vue组件中正确定义了自定义事件。
- 检查事件名称是否一致，包括大小写。
- 确保事件的作用域正确，特别是在嵌套组件中使用时。
- 确保正确传递组件间的事件。
- 检查代码是否存在其他错误。
对于v-on监听器中的Vue $emit不起作用的问题，建议参考腾讯云的Vue官方文档以获取更多关于Vue事件和组件通信的详细信息和示例代码。腾讯云的Vue官方文档链接：https://uniapp.dcloud.io/。
相关·内容
我有一个登录组件，我在App.vue主vue组件中调用它。在登录vue中，当我单击任何必须在vue js路由器的帮助下激活另一个vue组件的按钮时，必须用新的vue组件替换登录页面。因此，我寻找解决办法，但没有找到，这是有效的。有趣的是..。解决办法是存在的，但不知何故，它们对我不起作用。我想我漏掉了什么，但到底是什么？这是我第二天试图找出什么是不对的。有一件事起作用了，但作为野蛮的方法-v-on:click.local，它在登录vue中的任何单击之后隐藏登录vue，但这不是我想要的。
重要！我用vue js做一个laravel项目。Laravel版本8和vue js版本2
这是我的密码
Lo
浏览 4提问于2021-11-28得票数 1
回答已采纳
我已经创建了一个新的Vue实例，并将它分配给了我的窗口，它应该允许我在所有组件中访问它。这应该允许我访问应用程序中任何地方发出的事件。
但是，由于某种原因，情况并非如此，有人能告诉我吗？
app.js
window.Vue = require('vue');
window.events = new Vue();
window.app = new Vue({
el: '#app',
methods: {
emit: function (name, params) {
window.events.$emit(n
浏览 2提问于2019-04-23得票数 0
回答已采纳
这是包含Vue组件的主html文件
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="styles.css"> -->
</head>
<body>
<scri
浏览 0提问于2017-06-26得票数 1
回答已采纳
1回答
我有3个组件，一个用于显示注释，一个用于显示注释列表，另一个用于管理应该显示的内容。 当用户单击一条评论时，comment组件发出一个" Comment -selected“事件，CommentsList组件监听该事件以将其转发(通过执行$emit )到CommentsView组件。 所以基本上我必须把一个事件从一个组件传递给它的父组件。 Comment和CommentsList之间的通信正在工作，我可以在Vue dev工具中看到CommentsList中的第二个$emit也在工作，但CommentsView上的侦听器从未被触发。 但是，如果我在CommentsList中执行相同的$
浏览 42提问于2020-01-12得票数 2
回答已采纳
假设我有一个模态对话作为Vue组件。有时我想要OK和取消。有时候，我只想要好。我认为最干净的方法是让我的组件只在调用者监听Cancel事件时显示cancel。这能办到吗？
标记
<div id="vue-root">
<confirm-modal v-on:ok="handleOk"></confirm-modal>
<confirm-modal v-on:ok="handleOk" v-on:cancel="handleCancel"></confirm-modal
浏览 0提问于2017-09-14得票数 0
3回答
我想知道如何使用dynamic components和events来处理vue-js 2.3。
假设组件home $emit('eventFromHome')和组件archives $emit('eventFromArchives')
在<component></component>里抓他们的方法是什么？它是否存在比临时解决方案更好/更好的方法？
动态分量
var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
浏览 0提问于2017-06-01得票数 2
回答已采纳
假设我有一个子组件希望向曾祖父发送消息，代码将如下所示，如果我错了，请纠正我：
Vue.component('child', {
template: `<div v-on:click="clicked">Click me</div>`,
methods: {
clicked: function () {
this.$emit('clicked', "hello")
},
},
});
Vue.component('parent', {
tem
浏览 1提问于2017-04-06得票数 6
1回答
我正在尝试$emit事件的根，但它不起作用。当我按enter键时，它应该发出到根，组件应该得到该事件并执行函数，这将把它推到数组中。
JS:
Vue.component('input-comp',{
template : `
<div>
<input type="text" v-model ="textData" v-on:keyup.enter ="pushMessages"/>
<button v-on:click="pushMessage
浏览 1提问于2019-09-10得票数 1
回答已采纳
我是vue的新手(不到一周)，我正在重写一个业余爱好项目，开始行动起来。决定试用组件，然后遇到问题。我的一个子组件发出正常，但另一个没有被父组件接收到。vue-devtools chrome扩展告诉我，sidenavselect确实发出了关闭事件，但是没有触发sidenav v-on:close。 <sidenav v-on:close="sidebar_show = false" v-show="sidebar_show">
<sidenavbutton @click="draw_board">Start Ro
浏览 33提问于2019-12-12得票数 1
回答已采纳
在下面的代码中，单击组件将向父组件发出一个信号，父组件将以内联方式修改其状态(从某种意义上讲，而不是通过处理程序)：
Vue.component('my-component', {
template: '<div v-on:click="emitit">click on the component</div>',
methods: {
emitit: function() {
this.$emit('mysignal', 7)
}
}
})
new Vue({
浏览 2提问于2017-08-05得票数 3
回答已采纳
2回答
如果按下按钮，Vue容器中的单个对象就可以转换这个类。如果没有容器，就可以使用如下所示的v-bind:class选项，但在容器中，这对我不起作用。我能做什么?
(仅为澄清起见，v-on:click侦听器在本例中可以正常工作)
sidebar.vue：
<template>
<div class="content-list" id="content-buttons">
<a class="content-list-item" v-on:click="$emit
浏览 1提问于2020-02-24得票数 1
回答已采纳
我试图从Vue中的一个子组件调用一个$emit事件来触发App.vue中的一个函数。事件根据Vue检查器触发，DOM检查器显示DIV被设置为在事件上触发，但什么也没有发生。 我尝试重命名事件，确保函数在单击事件上工作，绑定到不同的组件和div，并且事件中不包含有效负载。似乎什么都不起作用。我试过Firefox和Chrome，结果都是一样的:叫做event，什么也没发生。 子组件和方法 <div class="navbutton" v-on:click="clicked(data.id)">
<p>{{data.text}}</
浏览 23提问于2019-05-02得票数 1
回答已采纳
2回答
我试图从子组件中调用父方法，但它似乎不起作用。在这里，代码：
index.html
<div class="percorso"v-on:removeall="pathlengthTozero()">
</div>
组件
Vue.component('lista-percorso', {
template:`
<div class="col-lg-2 col-xs-2">
<div class="removeall pull-right" v-on:click=
浏览 6提问于2017-07-28得票数 5
回答已采纳
2回答
我在Main2.vue中发出一个名为emit-event-main2-counter的事件
为什么Bottom.vue中的数据cntr不更新？
App.vue
<template>
<div class="app">
<Main2 />
<Bottom/>
</div>
</template>
<script>
import Main2 from "./components/Main2";
import Bottom from "./compon
浏览 0提问于2018-11-17得票数 0
回答已采纳
如何在单选按钮上使用$dispatch()或$broadcast()？我不能这样做(因为我不能在单选按钮上使用v-on:click )：
<div class="radio radio-primary">
<label>
<input type="radio" name="intern" id="intern" value="intern"
v-on:click="update" v-model="
浏览 2提问于2016-03-01得票数 3
回答已采纳
我对VueJS很陌生，我很喜欢它，但是如果我使用组件，有时它会变得有点复杂。我有一个购物车，我想使用增量/减量，或者用户可以在输入框中输入特定数量的物品。
问题是Vue一直抱怨子元素无法修改父数据。我厌倦了不同的方式，但这行不通。
这是我的组件
Vue.component('product-counter', {
props: ['quantity'],
data: function () {
return {
count: this.quantity
}
},
template: `<div class="row&
浏览 4提问于2020-10-15得票数 1
回答已采纳
这是一个代码示例。
Vue.component('button-counter', {
template: '<button v-on:click="emit_event">button</button>',
methods: {
emit_event: function () {
this.$emit('change', 'v1', 'v2', 'v3') // Here I emit multiple value
}
浏览 2提问于2017-05-24得票数 23
回答已采纳
我想通过vue手册学习vue和模板。对于v-for和组件，我的代码：
<div id="app-7">
<input v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="Add a todo">
<ul>
<todo-item2
v-for="(todo, index) in todos"
v-bind:key="todo.id"
浏览 1提问于2018-05-10得票数 0
回答已采纳
1回答
对于一个学校项目，我必须构建一个vue js应用程序。 我使用emit和:v-on从子组件交换数据和触发器方法，它工作得很好！现在我想从子合成器中做同样的事情，那就是vue。这意味着它是路由器显示的组件。 下面是子组件： methods: {
logout () {
console.log("logout child")
this.$emit('logoutUser', this.user)
}
}, 和app.vue： <router-view v-if="this
浏览 53提问于2021-11-03得票数 0
回答已采纳
2回答
我是Vue.js的新手。从文件和Laracast开始。我有个小问题。我想要“计算”，我的结果中哪个比较高。
示例：
我们有用户名单。每个用户都可以得到一些分数。总计-为所有用户15分。我要找一流的用户。我不知道，在哪里我需要定义一种特殊的方法。尝试在Vue-实例上初始化computed --但我在如何获得子属性方面遇到了困难。
我的vue-标签
<member v-for="member in members" :count=0 v-on:increment="incrementTotal" v-on:decrement="decrementTot
浏览 4提问于2017-02-02得票数 0
回答已采纳
1回答
编辑以纠正未报告的语法错误(请参阅注释)。现在，它可以按需要工作。
让我的事件处理程序在下面的Vue代码中触发是有困难的。
如您所见，有两个组件，posts和post，以及一个根Vue实例。post模板中的按钮应该触发remove事件，该事件由posts中的v-on:remove处理程序捕获，该处理程序使用post的索引调用posts.deleteItem。有人能告诉我我做错了什么吗？
<!DOCTYPE html>
<html lang="en">
<head>
<title>Po
浏览 1提问于2018-09-26得票数 3
回答已采纳
我已经为这个问题绞尽脑汁了好几个小时了。我看不出有什么问题，根据我所能说的，我正在遵循这里的文档：
下面的代码
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="wrap">
<test-listen>
<test-emit></test-emit>
</test-listen>
</div>
<script>
Vue.compon
浏览 2提问于2018-05-11得票数 8
回答已采纳
1回答
官方文件有一个链接：
下面是一个简单待办事项列表的完整示例：
Vue.component('todo-item', {
template: '\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">X</button>\
</li>\
',
props: ['title']
})
new Vue({
el: '#todo-list-e
浏览 1提问于2018-01-26得票数 1
回答已采纳
我开发了登录应用程序，运行良好，但我想让它更方便。当我集中在密码输入区域并点击键盘中的Enter Button时，我想要做这件事，应该点击Login按钮。
但是现在我必须用鼠标单击按钮或单击选项卡键并输入。
我在网上搜索，这看起来很容易，但我不知道如何应用我的条件。
问题是我把登录按钮放在另一个组件vue文件中。
main.vue
<div class="form-item">
<label>ID</label>
<input type="text" class="input-form"
浏览 3提问于2021-03-31得票数 1
回答已采纳
1回答
我有两个组件: MyItem.vue和ChangeItem.vue。我试图在ChangeItem.vue和组件中发出一个事件，并在MyItem.vue组件中捕获它。但不起作用。
MyItem.vue
<template>
<v-card>
<p>Hello</p>
</v-card>
<v-card>
<router-view name="areas.change" v-on:onchangeitem="test"><
浏览 0提问于2020-07-12得票数 0
我的vue应用程序使用： component -由component-child组成的父组件 在component-parent中，我有按钮，当有人点击一个按钮时，我想要发出一个事件，以便由vue处理并传递给另一个组件 到目前为止，我所做的是： var vm = new Vue({
el: '#app',
methods: {
itemSelectedListener: function(item){
console.log('itemSelectedListener', item);
}
浏览 49提问于2017-02-04得票数 26
回答已采纳
我有一个像这样的Button.vue。我使用v-on="$listeners"将所有侦听器传递给<a>。
<template>
<a
v-bind="$attrs"
v-on="$listeners"
class="Button"
href="javascript: void(0)"
:class="{ disabled }"
@click="onClick(
浏览 3提问于2020-10-06得票数 2
回答已采纳
我正在跟踪Vuejs文档，并试图使用click事件发出一个值。
守则如下：
Vue模板：
<div id="app">
<div class="container">
<div class="col-lg-offset-4 col-lg-4">
<sidebar v-on:incrementBtn="increment += $event"></sidebar>
<p>{{ increme
浏览 0提问于2018-06-05得票数 16
回答已采纳
我在Ionic 5/ Vue 3应用程序中使用。的事件侦听器对我不起作用。
下面是我的代码片段：
<duet-date-picker @duetChange="handleInput($event)"identifier="date" :localization.prop="localisation" direction="left"></duet-date-picker>
handleInput(e: any) {
console.log("e", e);
th
浏览 2提问于2021-04-13得票数 0
1回答
我对Vue和Firebase都是新手。所以我试着用这两个来实现一个非常简单的库应用。在这里你可以创建一个book对象，其中包含title，author，以及它是否被'read‘(默认情况下总是false )。每个组件都有一个复选框，用于更新“read”属性的值。然而，更新函数只更新一次值，我希望它在每次checkbox改变时都会改变。我做错了什么？ 这是App.vue中的模板和函数： <template>
<div id="app">
<Header />
<AddBook v-on:add-book=&#
浏览 23提问于2020-09-01得票数 0
我想按两个按钮输入号码。
但是当左边的那个变成10的时候，看起来是这样的：
我希望左边是2，右边是0。
所以我改变了我的代码
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal2"></button-counter>
<button-counter v-on:increment2="incrementTotal"></butt
浏览 1提问于2017-05-13得票数 1
回答已采纳
我是Vuejs的新手&尝试使用vue-quill-编辑器。在这里，我尝试在其他组件中使用Quill编辑器组件。
WysiwygInput.vue
<quill-editor
:options="{
placeholder: placeholder,
}"
:content="content"
v-on:change="$emit('change', $event.target.content)"
></quill-editor>
App.vue
<wysiwyg-in
浏览 5提问于2020-10-11得票数 0
我想将事件传递到我的vue.componenet中，我尝试了不同的方法，但都收到"TypeError: Cannot read property 'preventDefault‘of undefined“ 这是我的Vue.componenet： Vue.component('jl-asset-list', {
created() {
console.log(this.asset);
console.log(this.canModify);
console.log(this.editSiteAssetAllowed);
conso
浏览 24提问于2019-12-20得票数 0
回答已采纳
我是vuejs的新手，被这个问题卡住了。代码链接：https://jsfiddle.net/cdq8xu9t/ Js Vue.component('jk',{
props:['value'],
template:`
<div v-for="val in value">
<input type="text" v-bind:value="val.a" v-on:input="$emit('input',$event.target.value)&
浏览 21提问于2019-10-02得票数 0
回答已采纳
我有以下几点。包含两个字段的父视图，这两个字段位于父窗体中。v-text-field在绑定到父级中的模型时，可以按预期工作。代码片段中显示的radio字段不需要。我找到了一个解决方法，包括给radio本身一个v-model，发出一个v-on:change事件，并在父视图中使用一个方法来处理它。我想知道是否有一种更优雅的方法来做这件事，类似于对文本字段所做的事情。 Form.vue <Text v-model="textVal"></Text>
<Radio v-model="radioVal"></Radio>
浏览 19提问于2021-08-19得票数 1
回答已采纳
我正在为一个Vue.js组件编写单元测试，该组件显示一些无线电按钮，并在检查按钮时发出带有单选按钮id的事件：
ApplicationElement.vue:
<template>
<div id="element">
<label>
<input
type="radio"
name="Element"
id="element1"
v-on:change="chooseElement"
浏览 2提问于2021-01-11得票数 1
回答已采纳
1回答
使用v-for显示组件时，不会触发子组件发出的事件(自定义event update)。standaline组件按其应有的方式工作。
我不知道如何处理这个问题。
main.js
import Vue from "vue";
import App from "./App.vue";
new Vue({
render: (h) => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<h1>It work&l
浏览 21提问于2021-02-28得票数 2
回答已采纳
我在基于Vuejs的CRUD上工作。我有三个组件Goods.vue，UpdateGood.vue，App.vue我的问题出在App.vue内部的"updateGood“方法上。我必须点击两次“更新”按钮来更新表中当前的好项目。第一次点击是为了过滤功能，获取当前项目。第二次点击是拼接功能，用旧的替换更新的项目。我想在我的editGood()方法中实现filter函数来获取当前项的id，但是不知道怎么做。
我尝试在editGood()方法中设置过滤器函数，在该方法中，我通过单击按钮获取当前对象
模板文件: App.vue：
<template>
<div id=
浏览 1提问于2019-07-14得票数 0
1回答
我有以下情况：
var grandParend = new Vue({
components:[parent,child]
el: '#app',
template:
<parent>
<child v-on:my-event="eventHandler"><child>
<parent>
data: {
message: 'Hello Vue!'
},
methods:{
eventHandler(){
浏览 2提问于2017-12-24得票数 0
在vue js 2.+中使用自定义事件的正确方式是什么？
<submitButton v-on:formsubmit="onFormSubmit"/>
在Submit Button组件中，我像这样触发事件
this.$emit('formsubmit');
浏览 1提问于2018-09-03得票数 1
在Vue中有没有可能以类似的方式处理一个函数中的传入事件？ <template>
<component v-on="eventsDistributor(eventName, $event)"/>
</template>
<script>
浏览 27提问于2019-03-17得票数 11
我正在学习Vuejs event handling。
我认为开发人员可以在js文件中使用js来处理'event'。
有一个。
<div id="mainapp" v-on:event="processEventFromView">
<button type="button" v-on:click="emitEvent">
Emit Event
</button>
</div>
js文件
var app = new Vue({
el:&
浏览 0提问于2018-10-26得票数 6
我想从数组中做一些列表项目，当我单击每个列表item.When时，我想删除它们，单击每个项目，每个项目都被删除，但是在这里，$emit(\'remove\')实际上是vue js plaese帮助的内容。
<button v-on:click="$emit(\'remove\')">X</button>
浏览 6提问于2016-10-28得票数 2
回答已采纳
这是我的代码：
Main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.config.productionTip = false
var eventBus = new Vue();
Vue.prototype.$eventBus = eventBus;
Vue.prototype.$axios = axios;
/* eslint-disable no-ne
浏览 4提问于2020-10-03得票数 0
回答已采纳
Vue docs ()中有注释，但这也适用于孙辈吗？
grandchild.vue
<select class="form-control" v-model="selected" @change="updateValue()" >
...
</select>
methods: {
updateValue: function () {
this.$emit('refreshModel', this.selected)
this.$emit('
浏览 9提问于2019-02-26得票数 2
回答已采纳
1回答
我正在使用vue克隆一个flash应用程序()，我需要在用vue创建的项之间创建转换。
我已经在App.vue 上实现了不同组件之间的转换
但是，在Module1.vue中，我使用v-for 生成幻灯片
是否可以动态地为模块内生成的每一项创建路由器链接并相互转换？
下面是到目前为止该项目的托管演示：
我目前的解决方案是将幻灯片包装在大型父服务器中，并将其导航为一个旋转木马。不确定这是否是一个很好的优化解决方案，它不像vue的方式来做事情。
我也在试图将$emit返回到App.vue时遇到麻烦，我可以使用以下方法将slidePosition作为道具传递给孩子：
<router-view :
浏览 2提问于2017-04-25得票数 1
回答已采纳
由于某些原因，我的$emit似乎不能在父进程中触发。我基本上是试图创建一个html表单的模式弹出窗口。在我的header组件中，我有一个触发$emit的按钮，然后我尝试在form组件的app.js中侦听这个事件。但是当触发emit时，表单组件什么也不做。 这是我的代码 客户端/src/app.js <template>
<div id="app">
<MainHeader :modalVisability="modal" />
<OppForm :modalVisability=
浏览 14提问于2020-03-23得票数 1
回答已采纳
对Vue.js非常陌生，我在将子级的事件处理程序传递给它的直接父级时遇到了问题。我有一个滑块，我想把它的值传递给它的父组件。当我运行我的代码时，我把“child”打印到了控制台，而不是“parent”，所以很明显它没有正确侦听。
new Vue({
el: '#price-filter-container',
data() {
return {
value: [0, Products.maxPrice],
min: 0,
max: Products.maxPrice,
products: [Products.p
浏览 10提问于2017-06-14得票数 4
1回答
Vue.JS发出本机DOM事件
、、、、
我有一个自定义的checkbox组件，它由一个经典的checkbox和一个标签组成。您可以单击复选框或标签来切换状态。 ? 我想发出一个本机onchange event，这样我就可以在远方的div祖父母上做一个v-on侦听器。我用于实际复选框的输入正确地发出了一个本机onchange事件，但是我无法在单击标签时手动发出一个冒泡的本机onchange事件。我尝试过this.$emit('change')和this.$emit('onchange')，它们都不像原生DOM事件那样的气泡。 下面是一个简单的例子： <!-- Form.vue -->
浏览 26提问于2021-03-30得票数 0
2回答
我无法从根Vue实例中的子组件接收任何事件。
我有一个简单的子组件，它在单击或挂载时发出一个“hello”事件：
<template>
<div v-on:click="clicked"></div>
</template>
<script>
export default {
name: 'ChildComponent',
mounted() {
this.$emit('hello');
},
methods: {
clicked() {
浏览 2提问于2019-06-22得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
