Can someone help me with passing a function from the child component to the parent component? I am calling a modal in parent component. Inside component there are two buttons cancel and submit. I want to close the child component after clicking on the submit or cancel buttons. I tried to close the modal by declaring "show" in data, It makes the style display=None and makes the modal disappear but I am not able to scroll the screen after that.
Parent component
<div>
<modal-dialog v-if="show" id="showCommentEffortBox">
<input type="button" value="Cancel" @click="show=false">
<input type="button" value="Submit" @click="show=false">
</modal-dialog>
data() {
return {
show: true
}
}
Child component
<template>
<transition name="modal">
<div class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" style="max-width: 95%">
<div class="modal-content" style="max-height: 90vh;">
<header class="modal-header">
<slot name="header">
</slot>
</header>
<section class="modal-body" style="overflow-y: auto">
<slot name="body">
</slot>
</section>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
*****
}
</script>
Thanks in Advance
Have a look at these docs, this is the basic standard behaviour.
https://v2.vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events
You can pass methods as you pass data through slots.
Child component
<header class="modal-header">
<slot name="header" :methodName="methodName">
</slot>
</header>
<section class="modal-body" style="overflow-y: auto">
<slot name="body" :methodName="methodName">
</slot>
</section>
Parent Component
<template #header="props">
{{ props.methodName() }}
</template>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.