this.$emit不向Vue.js中的父元素传递数据
this.$emit是Vue.js中的一个方法，用于向父组件传递数据。它的作用是触发一个自定义事件，并将需要传递的数据作为参数传入。
在Vue.js中，父子组件之间的通信是通过props和自定义事件实现的。子组件可以通过props接收父组件传递的数据，而通过this.$emit触发自定义事件，向父组件传递数据。
使用this.$emit的基本语法是：this.$emit('eventName', data)。其中，'eventName'是自定义事件的名称，可以是任何字符串；data是需要传递给父组件的数据，可以是任何类型的数据。
这个特性在Vue.js的组件化开发中非常常见，可以实现父子组件之间的数据传递和交互。例如，当子组件中的某个按钮被点击时，可以通过this.$emit('click', data)触发一个自定义的'click'事件，并将需要传递的数据作为参数传递给父组件。
通过this.$emit向父元素传递数据的具体步骤如下：
- 在子组件中，定义一个方法，并在该方法中使用this.$emit触发一个自定义事件，并将需要传递的数据作为参数传入。
- 在父组件中，通过使用子组件的标签，并绑定一个自定义事件来接收子组件传递的数据。
- 在父组件中定义一个方法来处理子组件触发的自定义事件，并在该方法中获取子组件传递的数据。
这样，当子组件触发自定义事件时，父组件就能够接收到子组件传递的数据，并进行相应的处理。
关于Vue.js的this.$emit方法的更多详细信息，可以参考腾讯云提供的Vue.js官方文档：Vue.js官方文档。
相关·内容
和VUE.JS一起工作..。
有一个“theParent”组件，有两个孩子：'theForm‘和'theButtons’。(这是对更复杂情景的简化)。
在“theButtons”中有一个“清除”按钮来清除“theForm”表单的字段。
我能把事件从'theButtons‘传递给’家长‘，而不是从'theParent’传递到'theForm‘？
在“theButtons”中：
<b-button v-on:click="clean()">Clear</b-button>
methods: {
clean()
浏览 7提问于2020-12-01得票数 1
回答已采纳
3回答
我是Vue.js的新手。我对Vue组件之间的通信做了一些简单的练习。但我仍然有一个问题，谁是孩子，谁是家长。例如，我有以下代码：
HTML:
<body>
<div id="root" class="component">
<coupon @applied="onCouponApplied"></coupon>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js
浏览 7提问于2019-08-14得票数 1
回答已采纳
1回答
我将Vue.js与TypeScript和vue-property-decorator结合使用。我想在父组件和子组件之间执行一些双向数据绑定。以下是我想要做的事情的一个简单想法：
父组件
<template>
<progress :is-loaded.sync="isLoaded"/>
</template>
@Component
export default class ParentComponent extends Vue {
get isLoaded() { return Store.getters["isLoaded&
浏览 2提问于2017-11-17得票数 1
我在用Vue.js。从我的模板中，我包含了子组件(componentB)，它包含几个输入元素。我想从我的父模板初始化这些输入元素。我找到了一种方法(参见下面的代码)。但是，我想知道这是否是一种正确的方法，因为到目前为止，我阅读的文章使用了不同的方法(例如，使用$emit)：
您能否确认我下面的代码是否符合Vue.js设计概念，或者是否存在缺陷？
<template>
<div>
<div class="md-layout">
<div class="md-layout-item
浏览 0提问于2019-08-17得票数 2
3回答
在Vue.js中，我们可以发出自定义事件和一个参数，如
this.$emit('bark', 3);
然后，我们可以在父组件上侦听此事件，如
<parent-component @bark=handleBark />
handleBark (howManyTimes) {
console.log(howManyTimes);
// logs 3
}
我们怎么才能做出反应呢？
浏览 2提问于2020-11-17得票数 21
回答已采纳
1回答
我正在尝试在Vue.js的空数组中插入或更新已存在的对象：
additionalFields: [
{
name: '',
description: ''
}
]
我从子组件中获取数据：
updateAdditionalTitleForm(value, index) {
this.$emit('updateAdditional
浏览 14提问于2018-08-19得票数 0
我正在浏览一些Vue.js代码，并注意到一个模态组件中的一些代码如下所示：
mounted () {
this.$root.$on('habitica:update-challenge', (data) => {
if (!data.challenge) return;
this.cloning = false;
this.$store.state.challengeOptions.workingChallenge = Object.assign({}, this.$store.state.challengeOptions.workingCha
浏览 0提问于2019-06-10得票数 1
回答已采纳
我在vue.js 2.6中编写了使用Propper.js的组件。
Component是-generic popover组件，用于在页面上的元素中显示过滤器和菜单等内容。
为了将数据传递到Popover函数中，我使用的是参考文献，也许这就是情况？
控制台抛出错误并说。
波普尔:提供了无效的引用或波普尔参数。它们必须是DOM元素或虚拟元素。
<template>
<div>
<div ref="popcorn" aria-describedby="tooltip">
<slot name="
浏览 7提问于2022-01-28得票数 0
回答已采纳
1回答
我正在尝试使用$emit传递参数。筛选出我在父组件中的路由。它不工作，在控制台上，这个.$emit()返回未定义的。为什么会这样呢？
这是我的Home.vue
<template>
<div v-if="isLoggedIn">
<h1 style="text-align: center;">Home {{role}}</h1>
</div>
<div v-else style="margin: 0 auto;">
&l
浏览 8提问于2022-03-31得票数 0
我有两个成分在父子关系中。在子select组件中，我为当前选定的值定义了一个监视器，并且希望父程序在其更改时获得更新的值。我试图使用事件，但父程序只能侦听自己的vm。
在子组件中
watch: {
selected (value) {
this.$emit('selectedYearChange', value)
}
}
在父母中
mounted () {
this.$on('selectedYearChange', function (value) {
this.selectedYear = value
})
}
这显然不起作用
浏览 10提问于2017-07-06得票数 0
回答已采纳
1回答
我使用的是Vue.js 2.5，我有一个列表。每个项目都有一个按钮来切换细节。如果我点击一个按钮，其他项目的所有细节都应该关闭，新的必须打开。
下面是我的一段代码：
根：
<template lang="pug">
template(v-for="item in data")
item-template(:item="item", :details_visible.sync="details_visible")
</template>
<script>
expo
浏览 3提问于2017-11-21得票数 0
回答已采纳
我想$emit一些数据到vue.js 2中的所有子组件，这是我的代码：
根组件
const app = new Vue({
created: function(){
// here is some promise and after it done the below line runs
this.$emit('foo', 'bar');
}
});
子组件
<template></template>
<script>
export default {
c
浏览 6提问于2017-10-21得票数 1
我对Vue.js相当陌生，最后我使用$parent在父组件上操作了一个数组。我只是想知道这样做是否有危险：
setTitle(title) {
this.$parent.items[this.index].name = title;
this.editTitle = false;
}
而不是用$emit发出一个事件，然后在父节点上监听它？
这会在将来以任何方式烧死我吗？
我想知道，因为我从未见过它像我所遇到的任何教程中的第一个解决方案。
浏览 3提问于2017-05-15得票数 0
回答已采纳
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
当我试图在挂载中发出一个事件时，它似乎不会被触发！因此，它不会出现在devtools中
main.js
const app = new Vue({
el: '#app',
mounted() {
console.log('asd');
this.$emit("clicked", "someValue");
}
});
--
<body>
<div id="app">
<h1>vuejs</
浏览 1提问于2018-07-06得票数 0
我已经为这个问题绞尽脑汁了好几个小时了。我看不出有什么问题，根据我所能说的，我正在遵循这里的文档：
下面的代码
<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.js应用程序中有一个父组件和子组件。子对象在emit调用中将对象传递给父对象。有时，子对象必须将一个空对象传递回父对象。
父组件有多个这样的子组件。当它从一个子对象接收到一个包含空对象的emit时，它必须更新它的变量"f“以丢失来自那个特定子对象的过滤器内容，但仍然包括来自其他子对象的任何内容。我该怎么做呢？下面是我的代码，当子进程将一个空的newFilt对象传递给父进程时，它会清除整个"f“变量。如果其他子进程已经将newFilt数据发送回父进程，那么该数据将不再出现在父进程的"f“变量中。
子组件：
saveValues() {
thi
浏览 0提问于2020-03-14得票数 0
谢谢你读我的问题。
我对如何在我的Vue.js应用程序中实现这一点有疑问。
父组件: App.vue子组件: Loading.vue、ProductsList.vue、NoProductList.vue
App组件是容器。加载页面时，将显示加载组件。
然后加载组件检查产品。如果有产品，加载组件将将产品作为对象返回。
如果没有任何产品，加载组件将返回null。
如何根据加载组件的返回值告诉App组件要使用哪个组件？呃..。如果有产品，则加载ProductsList组件；如果没有产品，则加载NoProduct组件。
如何正确地通知父组件它应该在Vue中使用哪个组件？
我应该使用$emit (从子层
浏览 1提问于2017-04-27得票数 1
回答已采纳
在我的子组件中，我有一个自定义单击处理程序，它发出如下事件：
this.$emit('nextslide');
在我的父组件中，我试图捕获这样的事件：
render(createElement) {
return createElement(
'div',
{
on: {
nextslide: this.triggerFunction,
}
},
this.$slots.default,
)
},
我完
浏览 0提问于2018-05-12得票数 0
回答已采纳
我需要使用带有Options的Vue.js 3访问子组件的方法。在中有一个答案，但它适用于Vue.js 2和Vue.js 3，但使用的是复合API。
我仍然在父组件中尝试过这一点：
<dropdown-list @update="updateChildComponents"></dropdown-list>
<child-component-1 ref="childComponent1Ref" :url="url"></child-component-1>
<child-component-2
浏览 5提问于2022-02-09得票数 1
回答已采纳
2回答
我已经开始使用vuejs，并且我已经了解到，为了将数据从子组件返回到父组件，我们使用this.$root.$emit('name-of-event', myobject);
它将在this.$root.$on('name-of-event');的帮助下从家长那里收到
另一方面，我得到了一个vuejs项目，用于比较我学到的内容和在其中实现的内容，在那里我发现侦听我的事件的组件不是该组件的父级(触发事件的组件的标记没有呈现在侦听它的人中)。
我的问题是:是否总是直接父母是倾听触发事件的人？其他组件可以监听已发出的事件吗？
myAcomponent.vue :
浏览 7提问于2022-10-24得票数 0
回答已采纳
我整个上午都在努力将数据从孩子们传回给家长组件，但是没有运气。所以我需要你们的帮助，伙计们，如何做好这件事。
父组件
<template>
<dropin
wrapperClass="constrain"
:authToken="authToken"
:collectCardHolderName="true"
:enableDataCollector="true"
:enablePayPal="true"
>
&
浏览 1提问于2018-04-06得票数 0
回答已采纳
我有一个调用接口的按钮组件，我想将返回的响应推送到父级，在那里它将成为'translatedText‘属性，然而，我认为我错误地使用了$emit，因为出现错误：’`Uncaught (in promise) TypeError: Cannot read properties of undefined (read '$emit')。如何最好地捕获响应数据并将其传递给我的父母道具，在这种情况下使用$emit是最好的选择吗？ TranslationButton.vue <template>
<b-button type="is-prim
浏览 50提问于2021-11-16得票数 0
基本上，我有一个在创建时触发事件的组件和一个专门的“计数器”组件，它对创建的组件进行计数，这第二个组件与第一个组件并行存在。然而，当我尝试运行应用程序时，计数器组件只对自己进行计数，它似乎只检测到在那里触发的创建事件。
我曾尝试将this.$on()操作移动到其他生命周期挂钩，比如mounted()，但失败了。
组件A：
Vue.component('counter-component',{
template: `
<div class="card">
<div class="card-h
浏览 0提问于2019-09-25得票数 3
1回答
在Vue.js中，属性名称前的美元字符/符号前缀是什么意思？
例如：this.$emit('clicked', 'demo')
浏览 5提问于2019-07-04得票数 31
回答已采纳
我已经看过了关于事件的vue.js事件部分，但它似乎只给出了如何在html中使用vm.$on处理程序侦听事件的示例。在此和2.0的新变化之间，我不确定如何简单地从子->父对象传输事件。
我需要发送一个事件，因为在父母收到后，我想把它广播给另一个孩子。
我正在使用单页组件，这是我的设置：
// parent
export default {
mounted: function () {
this.$on('myEvent', function (msg) {
console.log('caught in parent', msg)
}
浏览 1提问于2016-11-08得票数 31
回答已采纳
2回答
我有以下事件可以发送到父组件，并且工作正常： this.$emit('sendToParent1', true);
this.$emit('sendToParent2');
this.$emit('sendToParent3');
this.$emit('sendToParent4', true);
this.$emit('sendToParent5', false); 然而，我遇到了一个特定的问题，它要求我按该顺序逐个发出这5个事件。 //emit this first and wait until the p
浏览 40提问于2021-02-07得票数 0
我对Vue.js非常陌生，我只是偶然发现了一件很难做的事情(至少对我来说是这样)，其中Vue抱怨变异了一个道具(孩子们显然不应该更换父母的道具)。我本来要在8小时内放弃的，但后来成功了！不仅如此，我还提出了另一个解决方案。以下是两个解决方案：
使用watch：
const VueNavDrawerComp={
props : ["childSideNav", "menuItems"],
template :
/*html*/
`
...
`,
浏览 0提问于2021-07-28得票数 1
回答已采纳
1回答
不太确定我是否理解手动(或vue.js )中的“非支持属性”：。
假设我有ChildComponent.vue文件：
<template>
<input type="text" class="input" :value="childValue" v-on="listeners">
</template>
<script>
export default {
props: {
childValue: {
type: String,
浏览 1提问于2019-11-07得票数 2
回答已采纳
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
回答已采纳
我是vue.js的新手，我写了一个方法来发布数据和获取页面地址(get和post)，如下所示
updateCategory() {.$EventBus.$emit(“loadingStatus”，true)；
this.$axios.get("http://rimonbd.com/tutorial/api/update-category", this.clickedCategory)
.then(res => {
this.$eventBus.$emit("lo
浏览 0提问于2018-11-13得票数 0
1回答
我正在用vue.js前端编写一个用户编辑功能。
axios部分：
sendUserData(){
axios.post('/api/saveUser', {
id: this.id,
name: this.name,
email: this.email,
password: this.password
},
浏览 0提问于2019-09-07得票数 0
回答已采纳
我正在阅读这个，但是我的组件属性使用Vuex数据。
从示例中可以看出，如果country_id位于data方法中，则工作正常。但是，当country_id是从Vuex存储返回数据的计算属性时，子组件的internalValue总是被初始化为undefined。
我做错了什么？
父组件：
export default {
computed: {
country_id() {
return this.$store.state.user.country_id
}
},
mounted: function () {
浏览 1提问于2017-05-18得票数 9
2回答
以下问题：
我有一个Vue.js组件，它依赖于其父组件的DOM。但是当这个道具通过的时候，它(this.$el)是未定义的，可能是因为它当时还没有被挂载。
我的组件的vue模板文件如下所示：
<template>
<md-card>
<md-card-content>
<ol>
<li v-for="item in headings(content)">
<a :href="`#${item.id}`">{{ item.name }
浏览 12提问于2017-01-07得票数 3
回答已采纳
3回答
我有一个和父组件一样共享v-model的组件。代码如下： Vue.component('greeting', {
template: '<input type="text" :name="name" v-on:input="updateSearch($event.target.value)"> ' ,
props: ['name'],
methods: {
updateSearch: function(value) {
this.$emit('
浏览 7提问于2019-03-15得票数 0
回答已采纳
我在vue.js中创建了一个待办事项列表，子元素中的下面这段代码返回undefined <input v-model="titleText" type='text'>
<input v-model="projectText" type='text'>
<button class='ui basic blue button' v-on:click="sendForm()">
Create
</button>
<button class='
浏览 39提问于2019-11-20得票数 1
回答已采纳
I在Vue.js中有一个从索引0到49的项目列表，当把startIndex和endIndex的项增加到1时，显示了由startIndex和endIndex控制的一个子集，显示了1-49中的项目，从DOM中删除了0，刚刚删除了<code>H19</>的0的高度，以及如何获得当我编辑endIndex？<code>H 210</code><code>F 211</code>时添加的项的高度。
<script type="text/x-template" id="virtual-list"&
浏览 2提问于2020-02-07得票数 0
我正在用Vue.js创建应用程序。我有两个类似的方法： editTool() {
return ToolService.editTool(this.id, this.editedItem)
.then((response) => {
this.$refs.dialogInfo.setSuccess(response);
})
.catch((error) => {
this.$refs.dialogInfo.setError(error);
})
浏览 221提问于2021-05-11得票数 0
回答已采纳
1回答
我有以下Vue.js组件，它们基本上应该有一个类似于无线电按钮的行为：
// Parent Component
<template>
<child-component
v-for="element in elements"
</child-component>
</template>
<script>
import ChildComponent from './Child.vue'
export default {
components: {
ChildComponent
浏览 2提问于2016-03-13得票数 1
回答已采纳
我知道使用$emit在VueJS上将数据从子组件传递给父组件，但我希望在javascript函数上获得该值。我的设想是：
亲本
created () {
this.$on('getValue', function (params) {
console.log('PARAMS: ' + params)
})
},
儿童
methods: {
checkBoxChanged (index) {
this.$emit('getValue', 'some value')
},
}
但它
浏览 0提问于2019-08-22得票数 0
3回答
我目前正在尝试获得一个简单的Tabs/Tab组件并运行。事件处理机制中似乎有些东西发生了变化，因此我无法让它工作。
目前的执行情况：
Tabs.vue
<template>
<div class="tabbed-pane">
<ul class="tab-list">
<li class="tab" v-for="tab in tabs" @click="activateTab(tab)">{{ tab.header }
浏览 3提问于2016-11-14得票数 3
我有一个Vue应用程序，其中一个父组件需要发出一个事件，它在一个按钮中完成这项工作：
<button @click.prevent="saveTradeClick" class="btn btn-primary">Save</button>
它会触发一个方法：
saveTradeClick: function (event) {
console.log("click");
this.$emit('SAVE');
console.log("after emit");
浏览 3提问于2019-11-22得票数 0
在Vue.js中，我有这样的功能：
<template>
<button @click="sendMail(); $emit('close')">Send</button>
</template>
<script>
methods: {
sendMail () {
axios.post('/mail', {email: this.email});
this.$notify.make('Sent!
浏览 16提问于2017-07-17得票数 2
回答已采纳
2回答
我有一个单击事件，对于这个单击事件，我想调用父组件中的函数/方法。因此，在我的子组件中的单击事件：
<button @click.native="addNew" />
以下是我的方法：
methods: {
addNew() {
this.$parent.addNew();
},
},
我想在我的父组件中调用这个函数：
addNew() {
this.$emit('open');
},
但是我得到一个错误，比如: this.$parent.addNew不是一个函数.我怎么才能修好它？
浏览 6提问于2022-10-04得票数 0
1回答
我是Vue.js的初学者，我有一个与相关的问题，它涉及Vue.js组件之间的通信，而这些组件不在同一页上。
我的Vue.js应用程序中有多个页面，使用路由器在它们之间导航。所以我有“Home”页面和“Search”页面来过滤实体。
在“主页”页面上，我也有较少详细的搜索组件，我希望将其用作“搜索”页面的快捷方式，因此当用户填充输入字段并单击按钮时，他的搜索参数将传递给“搜索”页面上的搜索组件，并显示“搜索”页面，然后执行搜索。基本上，我只想从“主页”页面上的快捷搜索组件发送数据到“search”页面上的搜索组件。我尝试使用事件总线，当在“主页”页面上单击按钮时，我会从“主页”页面搜索中发出参数
浏览 1提问于2020-08-27得票数 0
回答已采纳
当我们需要一个自定义组件在中发出事件时，我们必须使用：
this.$parent.$emit('myCustomEvent')
// instead of
this.$emit('myCustomEvent')
告诉了我们更多关于这方面的信息。
我过去常常在必须触发事件时运行this.$emit()。我想知道它们之间的主要区别是什么？
浏览 96提问于2017-07-17得票数 7
回答已采纳
我不能用vue.js将数据从子路由器传递给父路由器。
从很少的研究(包括堆栈溢出)来看，非常清楚的是，我们必须从子级使用$emit()方法。我在文档、堆栈溢出和youtube教程之间四处游玩，但我仍然错过了一些东西，我做错了。
下面是我的路由器Menubar.vue
<template>
<div id="app" class="container-fluid">
<div @clicked="onClickChild">
<p>login is s
浏览 0提问于2019-04-07得票数 4
回答已采纳
2回答
我正在创建一个非常简单的网站。我希望根据页面模板上navLayout中的数据集来更改Navbar元素。我想将数据传递给布局，然后使用props将其发送到NavBar。我的问题是如何将数据从页面到布局进行emit。
layouts/default.vue
<template>
<div>
<NavBar />
<div class="site-container">
<nuxt />
</div>
<Footer />
</div>
浏览 6提问于2020-06-25得票数 13
回答已采纳
假设我有一个名为child的组件。我想在父组件中访问那里的数据。在最终在父挂载中检索事件之前，我希望在childs挂载：this.$emit('get-data', this.data)中发出一个事件。这样做可行吗？如果是的话，怎样才能做到呢？如果没有，还有什么更好的选择？
干杯。
浏览 1提问于2019-02-17得票数 2
回答已采纳
有时我会犯这样的错误：
TypeError: this.$parent.test()不是函数
以下是我在父母中的方法：
test() {
console.log('test')
}
这个孩子是：
...
if (this.$parent) {
this.$parent.test()
}
我知道还有其他方法可以做到这一点，但我想知道的是，我是否可以检查这个家长是否存在！！这在vue.js中有可能吗？？谢谢
浏览 1提问于2019-11-25得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
