Vue2 Laravel5.3 Как отправить данные от дочернего к родительскому по событию

Здесь я пытаюсь добиться того, что когда я нажимаю на элемент в Item-card-product-choices.vue, он запускает selectPC с аргументом productChoice.id, и это также заставит родителя прослушивать это событие и одновременно получать аргумент. Я следую документу, чтобы сделать но родитель, похоже, не слушает selectPC. Итак, пожалуйста, решите следующие вопросы, семпай:

  1. что не так с тем, как родитель слушает дочернее событие?
  2. когда родитель слушает, как получить аргумент, который ребенок также использует в событии? Спасибо.

Item-card-product-choices.vue

<template>
  <ul class="product-choices">
    <li 
    v-for="productChoice in productChoices"
    class="product-choice" 
    @click.prevent="selectPC(productChoice.id)"
    >
      <svg v-if="productChoice.color === 'red'" width="20" height="20">
        <rect width="20" height="20" style="fill:#FF3333"></rect>
      </svg>
      ......
      ......
      ......
    </li>
  </ul>
</template>

<script>
  export default {
    props:[
      'index',
      'product'
    ],
    data() {
      return {
        productChoices:{},
      }
    },
    methods:{
      selectPC(productChoice){
        var vm = this;
        vm.$emit('select',productChoice)
      },
    }
  }
</script>

Родитель.vue

<template>
  <div>
   ....
    <product-choices :product="product" @selectPC="getSelected(productChoice)"></product-choices>
   ....
  </div>
</template>

<script>
  import productChoices from './Item-card-product-choices.vue';
  export default {
    components:{
      'product-choices':productChoices
    },
    data(){
      return{
        productChoiceSelected:{},
      }
    },
    methods:{
      getSelected(selected){
        var vm = this
          alert(1) // this is what I added to test if it listens 
        vm.$on('select',function(selected){
          vm.$http.get('/getProductChoice/'+vm.product.id+'/'+selected).then((response)=>{
            vm.productChoiceSelected = response.data
          });
        })
      }
   }
</script>

vue.js vuejs2 laravel-5.3
person warmjaijai    schedule 23.01.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Событие, которое вы создаете, называется "select", а не "selectPC", поэтому вам нужно прослушать его в Parent.vue.

<product-choices :product="product" @select="getSelected"></product-choices>

Ваш метод getSelected также не должен добавлять прослушиватель $on...

getSelected(selected) {
  this.$http.get('/getProductChoice/' + this.product.id + '/' + selected).then(response => {
    this.productChoiceSelected = response.data
  })
}
person Phil    schedule 23.01.2017
comment
Так что, если я не использую $emit, согласно документу, которым я поделился, родитель действительно может слушать метод ребенка, верно? и разве это не то, что я делал в своем коде? - person warmjaijai; 24.01.2017
comment
@warmjaijai дочернему компоненту все еще нужно $emit событие. И, как сказано в документе, которым вы поделились... Вы не можете использовать $on для прослушивания событий, исходящих от детей. Вы должны использовать v-on непосредственно в шаблоне. Обратите внимание, @select="..." совпадает с v-on:select="..." - person Phil; 24.01.2017
comment
О, теперь я увидел выброс в коде, в документе метод приращения и приращение выброса меня смутили. Позвольте мне попробовать ваше предложение сейчас, спасибо @Phil - person warmjaijai; 24.01.2017
comment
Но как мне получить данные, которые излучает ребенок? он просто получит это с помощью @select=? - person warmjaijai; 24.01.2017
comment
@warmjaijai да. Второй аргумент, переданный $emit, будет передан функции, привязанной к событию, то есть вашему методу getSelected. - person Phil; 24.01.2017
comment
теперь это работает отлично. Большое спасибо за ваше предложение - person warmjaijai; 24.01.2017