읽기를 위한 감사합니다 제 질문입니다.
나는 그것에 대해 읽
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>
미리 감사드립니다.
부모->child
$방출
에 대한아>parent
v 에 지시어를 캡처합 아이 구성 요소는 이벤트에 의해 방출$방출
아이 구성 요소의 트리거를 클릭한 이벤트:
export default {
methods: {
onClickButton (event) {
this.$emit('clicked', 'someValue')
}
}
}
부모 구성 요소를 받을 클릭 event:
<div>
<child @clicked="onClickChild"></child>
</div>
...
export default {
methods: {
onClickChild (value) {
console.log(value) // someValue
}
}
}