Call methods in the parent using slots in Vue JS

102 Views Asked by At

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

0

There are 0 best solutions below