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

Question

我制作了一个VueJS组件，可以运行一些

我有一个函数在compoent的计算显示用户的选择值在屏幕上。

如何将此值传递回父VueJS thingy？

它似乎与$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

这里的问题主要是因为发出一个camelCased事件名。因此，如文件中所述：

如果发出camelCmed事件名称：

this.$emit('myEvent')

听烤肉串的版本不会有任何影响：

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

与组件和道具不同，事件名称永远不会在JavaScript中用作变量或属性名称，因此没有理由使用camelCase或PascalCase。此外，DOM模板中的v-on事件侦听器将自动转换为小写（由于HTML的大小写不敏感），因此v-on： myEvents将成为v-on： myevent-使得myEvents无法监听。

出于这些原因，我们建议您始终使用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>