+1
Hỏi về cách gọi một method của parent component từ child component trong VueJs
Chào mọi người.
Mình đang học về vuejs, có một câu hỏi, rất mong mọi người giúp đỡ.
Vấn đề của mình:
Mình đang có 1 danh sách dạng như table. Và components mình đang tổ chức như sau:
---ListComponent
------ ItemComponent
Bên trong mỗi Itemcomponent là thông tin và button chức năng.
Khi click vào button mình muốn hiện modal popup để edit...
Do mình ko muốn lặp lại html nhiều, nên mình để html của các modal để ngoài parent component là ListComponent
Mình đang hơi vướng chỗ gọi function để show modal(function đó ở ngoài parent component), và bắt sự kiện click đó lại ở child component.
Mong các tiền bối thông não ạ.
Nguyễn Hữu Kim
@huukimit
Bình luận này đã bị xóa
Thêm một bình luận
3 CÂU TRẢ LỜI
+5
Nếu không dùng Vuex thì bạn làm như này:
// Chú ý, $event là biến implicit của Vue, nó là cục data mà bạn bắn kèm event `request-edit`
<ItemComponent v-for="item in data" ... @request-edit="openModal($event)" />
<Modal item="currentItem" @submit="handleSubmit" />
<script>
...,
data: () => ({ visible: false, currentItem: null }),
methods: {
openModal(item) {
this.currentItem = item
this.visible = true
},
handleSubmit(item, formData) {
console.log('Updated', { item, formData }},
}
},
</script>
@huukimit sự kiện @request-edit đc định nghĩa ở đâu bạn nhỉ
@ngankim Là custom event bạn tự bắng từ trong ItemComponent ra đó, bạn viết như này:
<button @click="$emit('request-edit', item)">
Update
</button>
@huukimit cách này giông của bác @quanghung97 bác nhỉ. Cảm ơn 2 bác nhiều!
Hoặc cách khác khi viết trong script thì sẽ như này:
onButtonClick() {
this.$emit('request-edit', this.item)
}
@dao.thai.son mình thử theo cách của bạn, thấy ko đc. mình bắt sự kiện click trong ItemComponent như bên dưới đúng ko nhỉ.
<template>
<a class="dropdown-item" @click="showEditForm">Edit</a>
</template>
export default {
props: ["data", "showEditForm"],
<Item :showEditForm="showEditFormFunction">
export default {
methods: {
showEditFormFunction(){
}
}
+3
Bên trong ItemComponent bạn bắt sự kiện @click sau đó gọi methods
methods: {
clickFunc(data)
{
this.$emit('clickFunc', data)
},
}
bên trong ListComponent
<ItemComponent @clickFunc="clickFuncXXX">
methods: {
clickFuncXXX(data)
{
// do something
},
}
Ngoài ra bạn có thể sử dụng $bus, 'vuex' để thực hiện
