7
感謝您閱讀我的問題。將數據從孩子傳遞給Vuejs的父母(是否如此複雜?)
我已經讀到它
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>
在此先感謝。
非常感謝你伯特,你的回答有效! :D你能提供更多關於指令'clicked-show-detail'的信息嗎?因爲'我仍然懷疑它。 – Sommer
@Sommer'@ clicked-show-detail'是「v-on:clicked-show-detail」的簡稱。這就是你如何定義一個事件監聽器。在這種情況下,它說,事件觸發時調用'clickedShowDetailModal'方法。請參閱https://vuejs.org/v2/guide/events.html#Listening-to-Events – Bert
瞭解!再次感謝你! – Sommer