데이터를 전달하는 데에 아이의 부모에 Vuejs(은 그렇게 복잡하게 하는가?)

읽기를 위한 감사합니다 제 질문입니다.

나는 그것에 대해 읽

https://stackoverflow.com/questions/40915436/vuejs-update-parent-data-from-child-component

https://forum.vuejs.org/t/passing-data-back-to-parent/1201/2

개념은 동일한 필요를 통과 데이터를 객체로서 아이를,부모가 사용$방출을 통과 데이터를 구성 하지만 부모는't 을 작동합니다. U 무엇이 잘못된 것입니까? 체크인 나 여기에 코드: 

Vue.component('list-products', {
  delimiters: ['[[', ']]'],
  template: '#list-products-template',
  props: ['products'],
  data: function () {
    return {
      productSelected: {}
    }
  },
  methods: {
    showDetailModal: function (product) {
        console.log('click product in child, how can i pass this product to productSelected data in parent?');
      console.log(product);
      this.productSelected = product;
      this.$emit('clickedShowDetailModal', product);
    }
  }
});

var app = new Vue({
  delimiters: ['[[', ']]'],
  el: '#resultComponent',
  data: {
    listProducts: [
        {'name':'test1',id:1},
        {'name':'test2',id:2},
        {'name':'test3',id:3}
    ],
    productSelected: {}
  },
  methods: {
    clickedShowDetailModal: function (value) {
      console.log('value');
      console.log(value);
      this.productSelected = value;
    }
  }
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="resultComponent" data-toggler=".small-up-2" class="row small-up-1">
  <list-products :products="listProducts"></list-products>
</div>

<script type="text/x-template" id="list-products-template">
  <div>
    <div class="column column-block" v-for="(product, index) in products" :product="product" :index="index" :key="product.id">
    <li class="more-benefits">
        <a @click="showDetailModal(product)">Click me [[ product.name ]] and check console.log »</a>
    </li>
    </div>
  </div>
</script>

미리 감사드립니다.

Community
편집된 질문23일 5월 2017 в 12:10
프로그래밍
vue.js emit
11일 4월 2017 в 12:18
아직 보기가 없습니다.
해결책

당신이't 듣는 이벤트입니다. 변경 이벤트에 이름을클릭-쇼-정보가 있습니다. 려고 합니다.

에서showDetailModal메소드의 구성 요소입니다.

this.$emit('clicked-show-detail', product);

에서 당신의 Vue.

예.

해설 (3)

소품에 대한부모->child

사용할 수 있는$방출에 대한아>parent

v 에 지시어를 캡처합 아이 구성 요소는 이벤트에 의해 방출$방출

아이 구성 요소의 트리거를 클릭한 이벤트:

export default {
   methods: {
     onClickButton (event) {
         this.$emit('clicked', 'someValue')
     }
   }
}

부모 구성 요소를 받을 클릭 event:

<div>

</div>

...

export default {
  methods: {
      onClickChild (value) {
          console.log(value) // someValue
      }
  }
}
bereket gebredingle
편집된 답변18일 4월 2019 в 7:54
해설 (1)