Как в Vue передать из компонента в родителя?

Question

[Игорь Безлепкин]

Привет! В однокомпонентной структуре vue предаю из дочернего компонента в родителя через emmit, все работает.

А вот так нет.

Vue.component('line-chart', {
    extends: VueChartJs.Line,
    data: function () {
        return {
            message: 'test'
        }
    },
    mounted () {
      this.$emit('changeMessage', this.message);
    }
})

var vm = new Vue({
    el: '.app',
    data: {
        data: null,
        message: 'Hello World'
    },
    methods: {
        changeMessage: function () {
            this.message = 'test';
        }
    }
})

<div class="app">
  {{ message }}
  <line-chart :chart-data="data" @changeMessage="changeMessage"></line-chart>
</div>

Answer 1

[0xD34F]

@changeMessage="changeMessage"

Да ну? Я вот слышал, будто бы

директивы прослушивания событий v-on внутри DOM-шаблонов автоматически преобразуются в нижний регистр (из-за нечувствительности HTML к регистру), поэтому v-on:myEvent станет v-on:myevent — что делает прослушивание события myEvent невозможным

Comments

[Roman K]

"Обожаю" людей, которые умышленно игнорируют стандарты, тащат свой camelCase в HTML, а потом "а чё у меня ничего не работает?"

[Игорь Безлепкин]

Вот так все заработало :)

_this.$emit('change-message', _this.message);

[Игорь Безлепкин]

Roman Kitaev, ну это не умышлено. Просто внимания не обратил.

Answer 2

[Дима Паутов]

в родителе написать:

var vm = new Vue({
    el: '.app',
    data: {
        data: null,
        message: 'Hello World'
    },
    mounted () {
       this.$on('changeMessage', (message) => {
         this.message = message
       })
    }
})

раз вы используете кастомные события, так читайте доку, как их слушать