VueJS 将计算值从组件传递到父级

Question

我制作了一个操作一些元素的 VueJS 组件<select>。此 UI 的结果是用户选择一个值。

我在组件中有一个函数，computed用于在屏幕上显示用户选择的值。

我如何将此值传递回父 VueJS 事物？

这似乎与此有关$emit，但我没有看到我有活动。

我已经按照此处的建议筹集了一份资金，但现在还没有发生。

在组件中：

        computed: {
            selectedCode: function () {
                var selected = '(No code selected.)';
                if (this.category) { selected = this.category; }
                if (this.code) { selected = this.code; }

                this.$emit('selectedCode', selected);

                return selected;
            },

在父 Vue 应用程序中：

<code-selector v-bind:code="code" v-on:selectedCode="codeSelect"></sic-selector>

和

                methods:
                {
                    selectedCode: function (z) {
                        console.log(z);
                    },

Answer 1

这里的问题主要是因为发出了驼峰命名的事件名称。所以，正如文档中提到的：

\n

\n

如果发出驼峰命名的事件名称：

\n

this.$emit(\'myEvent\')\n

\n

听 kebab-cased 版本不会有任何效果：

\n

<!-- Won\'t work -->\n<my-component v-on:my-event="doSomething"></my-component>\n

\n

与组件和 props 不同，事件名称永远不会在 JavaScript 中用作变量或属性名称，因此\xe2\x80\x99s 没有理由使用驼峰命名法或帕斯卡命名法。此外，v-onDOM 模板内的事件监听器将自动转换为小写（由于 HTML\xe2\x80\x99s 不区分大小写），因此v-on:myEvent将变为v-on:myevent\xe2\x80\x93 ，从而myEvent无法监听。

\n

出于这些原因，我们建议您始终使用短横线命名的事件名称。

\n

\n

因此，只需发出一个短横线大小写的事件名称，例如：

\n

this.$emit(\'selected-code\', selected);\n

\n

然后你就可以轻松地听它，如下所示：

\n

<code-selector v-on:selected-code="codeSelect"></code-selector>\n

\n

这是一个工作演示：

\n

\r\n

\r\n

this.$emit(\'myEvent\')\n

\r\n

<!-- Won\'t work -->\n<my-component v-on:my-event="doSomething"></my-component>\n

\r\n

\r\n

\r\n

\n

注意：请注意，演示在您在帖子中共享的问题的答案中共享，我可以从子组件到父组件获取计算数据吗？在codepen上，有一个简单的发出事件名称，例如：

\n

this.$emit(\'update\', e.target.valueAsNumber)\n

\n

因此，该代码在该演示中可以正常工作。

\n