javascript - Vue.js - 从子级向父级发出事件
问题描述
我无法将$emit
事件从子组件传递到它的父组件。我可以成功发送事件,但不能在父级中接收它。
Results.vue
(儿童):
<a href="#" v-on:click="sendResultValues"></a>
//
methods: {
sendResultValues: function () {
this.$emit('send-result-values', 'carrier');
}
},
当我单击 时<a>
,我可以使用 Vue DevTools 看到触发了一个$emit
事件:
但是,console.log 中没有收到任何内容,因为我的代码如下(父级):
Input.vue
(家长):
<search-results></search-results> //Results.vue component
<search-popover v-on:send-result-values="showResultData"></search-popover>
//
methods: {
showResultData: function () {
console.log("Data received from child: ")
}
},
解决方案
您需要在组件上收听事件search-results
,而不是在search-popover
.
Input.vue(父):
<search-results v-on:send-result-values="showResultData"></search-results>
<search-popover></search-popover>
methods: {
showResultData: function () {
console.log("Data received from child: ")
}
},
推荐阅读
- google-cloud-ml - Google ML 引擎:无法保存模型
- angularjs - 显示角度指令中最大整数的总和
- angular - Angular 4 微调器
- c# - 同一个方法多次执行时如何获取 ScenarioContext?
- android - 未找到与给定名称匹配的资源(位于“layout_above”,值为“@id/adView”)。即使在 AdView 拥有该 ID 之后
- google-chrome - Chrome 谷歌云消息
- c++ - 是否可以在 C++ 中在运行时构建变量名?
- node.js - 使用 NodeJS 进行 Active Directory 身份验证
- c# - 如何根据asp.net中的第一个文本框日期在第二个文本框中设置日期
- sql - SQL 有什么方法可以提高多列上“like”查询的性能?