将数据从孩子传递给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。