Vue js почему данные не переходят в родительский компонент?

Question

Почему я не могу передать данные между компонентами из child в parent, в чем моя ошибка, прошу пожалуйста помочь.

Компонент child

<template>
<div class="container mt-5">
          
     <button type="submit" v-on:click="transfer" class="btn btn-success" role="button">Кнопка</button>
 
</div>
</template>

<script>

    export default{
        methods:
        {
            transfer: function(){

                this.$emit('change', '1123');
            }
        },
        mounted()
        {
         
        }
    }
</script>

Компонент родитель

<template>
<div>

        <div v-on:change="shows($event)"></div>
         <div> Значение - {{ count }} </div>
    <router-view></router-view>

</div>
</template>
<script>

    export default{
        data(){
            return {
                count: '',
            }
        },
        events:
        {
            shows: function(data){
                this.count = data;
                console.log('Успешно')
            }
        },
        mounted()
        {
         
        }
    }
</script>

Answer 1

Попробуйте <div v-on:change="shows"></div>

Но можно ещё так - в child пропсами передают функцию parent-компонента, и в child её вызывают, с набором произвольных аргументов. Таким образом данные из child попадают в parent - через аргументы этой функции.

Answer 2

Вы вешаете обработчик v-on:change="shows($event)" на div, которые не знает, что с ним делать, поэтому и молчит)

И в родительском компоненте, вы используете какое-то несуществующее во Vue свойство events для методов (во Vue следует использовать - methods)

Вот вам пример(поправленного вашего кода)

Vue.component('child', {
  methods: {
    transfer: function() {
      this.$emit('change', '1123');
    }
  },
  mounted() {

  },
  template: `
  <div class="container mt-5">
          
     <button type="submit" v-on:click="transfer" class="btn btn-success" role="button">Кнопка</button>
 
</div>
  `
})

const app = new Vue({
  el: '#app',
  data: {
    count: ''
  },
  methods: {
    shows: function(data) {
      this.count = data;
      console.log('Успешно')
    }
  },
  mounted() {

  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <child v-on:change="shows($event)"></child>
  <div> Значение - {{ count }} </div>
</div>

БЛОГ НА HUSL

Vue js почему данные не переходят в родительский компонент?

Ответы (2 шт):