Truyền dữ liệu từ trẻ sang phụ huynh trong Vuejs (có quá phức tạp không?)

Question

cảm ơn vì đã đọc câu hỏi của tôi.

Tôi đã đọc về nó

vuejs update parent data from child component

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

Khái niệm này được như vậy, tôi cần phải vượt qua một đối tượng dữ liệu từ con để phụ huynh, tôi đã sử dụng $ phát ra để truyền dữ liệu đến thành phần gốc nhưng không hoạt động. Bạn có biết những gì là sai? Kiểm tra mã của tôi ở đây:

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>

Cảm ơn trước.

Answer 1

Bạn không nghe sự kiện này. Tôi đã đổi tên sự kiện thành clicked-show-detail. Thử cái này.

Trong phương thức showDetailModal của thành phần của bạn.

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

Trong Vue của bạn.

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

Example.