VueJS передает вычисленное значение от компонента к родительскому

Question

Я создал компонент VueJS, который управляет некоторыми <select>элементы. Результатом этого пользовательского интерфейса является то, что пользователь выбирает значение.

У меня есть функция в компоненте 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

Проблема здесь в основном из-за генерации имени события camelCased. Итак, как указано в документации:

Если генерируется имя события camelCased:

this.$emit('myEvent')

Прослушивание версии в кебабе не даст никакого эффекта:

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

В отличие от компонентов и свойств, имена событий никогда не будут использоваться в качестве имен переменных или свойств в JavaScript, поэтому нет причин использовать camelCase или PascalCase. Дополнительно,v-on прослушиватели событий внутри шаблонов DOM будут автоматически преобразованы в нижний регистр (из-за нечувствительности к регистру в 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>

Примечание: обратите внимание, что демонстрация, представленная в ответе на вопрос, которым вы поделились в своем сообщении, Могу ли я получить вычисленные данные от дочернего компонента к родительскому компоненту? в коде имеет простое имя генерируемого события, например:

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

Таким образом, код работает в этой демонстрации.