Yêu cầu thg 9 24, 2020 7:06 SA 241 0 3
  • 241 0 3
+1

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

Chia sẻ
  • 241 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 CÂU TRẢ LỜI


Đã trả lời thg 9 24, 2020 7:18 SA
Đã được chấp nhận
+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>
Chia sẻ
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ỉ

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>
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!

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)
}
Đã trả lời 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.

Chia sẻ
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(){
   }
}
Đã trả lời 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

Chia sẻ
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí