需要帮助在VUE中向父组件发送值

Question

我正在寻找第一个应用程序的帮助，我是VUE的新手所以我希望有很多我不知道。我开始这个项目是通过调整我正在遵循的课程作为课程的一部分，不幸的是我想要实现的内容在课程中没有详细说明。

我创建了一个简化的测试用例来尝试使基本功能正常工作（下面链接）。 https://codepen.io/christopherduffy/pen/bJWRJm

在这种情况下，我在“quoteValues”数组中的每个对象的v-for循环中显示按钮。单击按钮时，阵列中该索引处对象的对象值将记录到控制台。

理论上，要将内容添加到DOM，单击的按钮会调用一个方法来发出与“quoteValues”数组中的对象索引匹配的值。然后我使用v-for循环显示“quotes”数组中的所有引号，应该添加所选匹配值。这至少是我的理解。

我遇到很多麻烦的事实是附加到eventListener“quoteAdded”的方法“newQuote”没有按预期调用。快速注意，在创建测试用例之前，我已将每个组件注册在其自己的component.vue文件中，并且该方法将触发，但我无法发出多个值。

简而言之，我想要实现的结果是匹配单击按钮索引的值显示在“app-quote”组件中看到的HTML中，如下例所示。我试图了解插槽以及如何将特定值添加到特定插槽时也遇到了很多困难。

<div>
 <h3>added quote</h3>
 <p data-id="1">quote id: 1</p>
 <p>quote name: one</p>
</div>

基本上我会很感激，如果有人能指导我做错了什么或指出我正确的方向（记住我是VUE的新手）。

Answer 1

您遇到了事件命名问题。请参阅此处的文档以了解原因：https://vuejs.org/v2/guide/components-custom-events.html。基本上当你发出fooGoo时，你无法通过fooGoo正确地听它。或者foo-goo甚至。我在这里修改你的笔：https://codepen.io/cfjedimaster/pen/PgmxPp?editors=1111。请注意我是如何简化事件名称的。

从组件：

this.$emit('quoteadded', this.quoteValues[index]);

并在标记中：

<app-new-quote v-on:quoteadded="newquote"></app-new-quote> 

Answer 2

我刚刚写了你的代码，我收到了这条消息

Event "quoteadded" is emitted in component <AppNewQuote> but the handler is registered 
for "quoteAdded". Note that HTML attributes are case-insensitive and you cannot use v- 
on to listen to camelCase events when using in-DOM templates. You should probably use 
"quote-added" instead of "quoteAdded".