VueJS将计算值从组件传递给父级答案

【问题标题】：VueJS passing computed value from component to parentVueJS将计算值从组件传递给父级
【发布时间】：2020-08-24 14:53:01
【问题描述】：

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

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

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

$emit 似乎是这样，但我没有看到我有活动。

按照here 的建议，我已经绑定了一个，但现在没有发生。

在组件中：

        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);
                    },

【问题讨论】：

因此，如果 HTML 中未使用其值，则计算函数不会运行，但这仍未解决。所以：我肯定会使用$emit 函数，但父级中仍然没有发生任何事情。

标签： vue.js

【解决方案1】：

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

如果发出驼峰式事件名称：
this.$emit('myEvent')
听 kebab-cased 版本没有效果：

<my-component v-on:my-event="doSomething"></my-component>
与组件和道具不同，事件名称永远不会用作 JavaScript 中的变量或属性名称，因此没有理由使用 camelCase 或 PascalCase。此外，DOM 模板中的 v-on 事件监听器将自动转换为小写（由于 HTML 不区分大小写），因此 v-on:myEvent 将变为 v-on:myevent - 使 myEvent 无法监听。

出于这些原因，我们建议您始终将 kebab-case 用于事件名称。

所以，只需发出一个 kebab-case 事件名称，如：

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

然后你可以轻松地听它：

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

这是一个工作演示：

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ getCount }} times.</button>',
  computed: {
     getCount: function () {
        this.$emit('selected-code', this.count);
        return this.count;
     }
  }
})


new Vue({
  el: "#myApp",
  data: {},
  methods: {
    codeSelect(z) {
      console.clear()
      console.log(z);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="myApp">
  <button-counter v-on:selected-code="codeSelect"></button-counter>
</div>

注意：请注意，您在Can I get computed data from child component to parent component?codepen 上分享的问题的答案中分享的演示有一个简单的发出事件名称，例如：

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

因此代码在该演示中运行。

【讨论】：