2

I have a component called Modal. It has a slot. And I'm passing the title as a prop, And I'm passing different buttons with different methods in them using a slot. So I can reuse it anywhere.

So I'm on my homepage and I have imported my modal component with the click of the delete button on my home page the modal appears,

<Modal title="Are you sure to delete?">
   <button @click="deleteItem">Yes</button>
   <button @click="closeModal">No</button>         
</Modal>

The deleteItem and closeModal methods on my homepage. I know when we pass slots it will call the methods in the Modal Component (according to this case). But can't we trigger this deleteItem and closeModal methods on the homepage? I just want to make my modal component reusable just the title

Mishen Thakshana
  • 1,050
  • 1
  • 14
  • 38
  • 1
    you can emit a "clicked-close-button" event, or pass callback to modal as a prop. – linusw Jun 27 '22 at 04:02
  • 1
    that won't run `deleteItem` and `closeModal` methods in `Modal` component, that will run them in the containing component – Bravo Jun 27 '22 at 04:27
  • [does this](https://codesandbox.io/s/priceless-mcnulty-z20lbc?file=/src/App.vue) help – Bravo Jun 27 '22 at 04:36
  • @Bravo I know this concept bro but somehow I want to make this happen – Mishen Thakshana Jun 27 '22 at 05:52
  • 2
    Sorry, did you want it to call closeModal/deleteItem functions inside Modal - your question states that this is how it DOES work, when it doesn't actually - so what you're saying is you want it to `call the methods in the Modal Component` - but why would you want `Modal` to have a `deleteItem` method? that makes it hardly reusable – Bravo Jun 27 '22 at 05:55
  • 1
    You should use a scoped slot if you want to expose methods which are internal to the Modal to your parent component. – IVO GELOV Jun 27 '22 at 07:06

0 Answers0