Vuejsで子供から親にデータを渡す（それはとても複雑ですか？）

Question

私の質問を読んでくれてありがとう。

私は考え方が同じであること

vuejs update parent data from child component

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

について読んだことが、私は私が$を使用している、子から親へのデータオブジェクトを渡す必要がありますにデータを渡すために発します親コンポーネントですが動作しません。何が間違っているか知っていますか？ここに私のコードをチェックしてください：

Vue.component('list-products', { 
 
    delimiters: ['[[', ']]'], 
 
    template: '#list-products-template', 
 
    props: ['products'], 
 
    data: function() { 
 
    return { 
 
     productSelected: {} 
 
    } 
 
    }, 
 
    methods: { 
 
    showDetailModal: function (product) { 
 
    \t 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: [ 
 
     \t {'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>

感謝を事前に。

Answer 1

あなたはイベントを聴いていません。イベント名をclicked-show-detailに変更しました。これを試して。

コンポーネントのshowDetailModalメソッドで。

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

あなたのVueでは、

<list-products :products="listProducts" @clicked-show-detail="clickedShowDetailModal"></list-products> 

Example。