Asked Sep 24th, 7:06 AM 116 0 3
  • 116 0 3
+1

Hỏi về cách gọi một method của parent component từ child component trong VueJs

Share
  • 116 0 3

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 ạ.

Sep 24th, 7:18 AM

3 ANSWERS


Answered Sep 24th, 7:18 AM
Accepted
+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>
Share
Ngân Kim @ngankim
Sep 24th, 7:38 AM

@huukimit sự kiện @request-edit đc định nghĩa ở đâu bạn nhỉ

0
| Reply
Share
Sep 24th, 7:41 AM

@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>
+1
| Reply
Share
Ngân Kim @ngankim
Sep 24th, 7:42 AM

@huukimit cách này giông của bác @quanghung97 bác nhỉ. Cảm ơn 2 bác nhiều!

+2
| Reply
Share
Sep 24th, 7:43 AM

Hoặc cách khác khi viết trong script thì sẽ như này:

onButtonClick() {
  this.$emit('request-edit', this.item)
}
0
| Reply
Share
Answered Sep 24th, 7:12 AM
+3

Bạn có thể viết function để show modal đó ở parent component, rồi pass nó qua prop tới child component, và trong child component ItemComponent thì dùng nó ở chỗ event @click.

Share
Ngân Kim @ngankim
Sep 24th, 7:49 AM

@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(){
   }
}
0
| Reply
Share
Answered Sep 24th, 7:12 AM
+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

Share