[Vuejs]-Refs a slot to define the parent function

by

0đź‘Ť

âś…

You’re right in your assumption that the slot tag cannot be referenced using a ref tag.

In your case, it’d be better to have the modal component emit a submit event when the “Submit” button is clicked:

<template>
  <div class="modal">
    <slot></slot>
    <button @click="$emit('submit')">Submit</button>
  </div>
</template>

And then in the parent component scope, you can specify that the form component’s submitModal function is the handler for the modal’s submit event.

<modal @submit="$refs.modalcontent.submitModal()">
  <contract-form ref="modalcontent"></contract-form>
</modal>
👤thanksd

Leave a comment