Asked thg 9 24, 2020 7:06 SA 185 0 3
  • 185 0 3
+1

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

Share
  • 185 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 ạ.

thg 9 24, 2020 7:18 SA

3 ANSWERS


Answered thg 9 24, 2020 7:18 SA
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
Avatar Ngân Kim @ngankim
thg 9 24, 2020 7:38 SA

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

0
| Reply
Share
thg 9 24, 2020 7:41 SA

@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
Avatar Ngân Kim @ngankim
thg 9 24, 2020 7:42 SA

@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
thg 9 24, 2020 7:43 SA

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 thg 9 24, 2020 7:12 SA
+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
Avatar Ngân Kim @ngankim
thg 9 24, 2020 7:49 SA

@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 thg 9 24, 2020 7:12 SA
+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
Viblo
Let's register a Viblo Account to get more interesting posts.