Is it really not recommended to pass a function as a prop to a child component in Vue? If I were to attempt this, how could I achieve it? Here is my current approach:
Within my child component -
<template>
<b-card :style="{'overflow-y': 'scroll', 'border-top': '0px', 'height': 'calc(100% - 53px)', 'border-top-left-radius': '0px', 'border-top-right-radius': '0px'}">
<div class="img-magnifier-container" :style="{'position': 'relative'}">
<b-img :id="('og' + curr_doc_num) + index_page" :src="pageImages[responseData[curr_doc_num-1]['page_nums'][index_page-1]-1].pageValue" fluid-grow alt="Fluid-grow image" @load="updateOnResize" >
</b-img>
<div
:key="j"
:id="(j)"
@mouseover="show_divs($event)"
@mouseout="hide_divs($event)"
v-bind:style="{
left: divKey['bbox']['left'] + 'px', position:'absolute', top:divKey['bbox']['top'] + 'px', height:divKey['bbox']['height'] + 'px', width: divKey['bbox']['width'] + 'px', 'border': divKey['border-width'] + 'px solid rgb(' +
divKey['color'][0] + ',' + divKey['color'][1] + ',' + divKey['color'][2] + ')', 'pointer-events': divKey['pointer-events'], 'z-index': divKey['z-index'], 'cursor': 'pointer' }"
v-on:click="find_cordinates($event)"
v-for="(divKey, j) in divsToBeRendered"
/>
</div>
<!-- </b-tab>
</template>
</b-tabs> -->
</b-card>
</template>
Here, the functions show_divs($event), hide_divs($event), and others are called as shown. The script is as follows:
<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@Component({
components: {}
})
export default class Showcase extends Vue {
@Prop() public show_divs: any;
@Prop() public hide_divs: any;
@Prop() public find_cordinates: any;
@Prop() public divsToBeRendered: any;
public mounted() {
console.log("show", this.show_divs());
}
}
The template of the parent component is as follows:
<ResultShowcase
:updateOnResize="updateOnResize"
:show_divs="show_divs"
:hide_divs="hide_divs"
:find_cordinates="find_cordinates"
:divsToBeRendered="divsToBeRendered"
>
</ResultShowcase>
These functions work correctly in the parent component. What could be the issue here? Additionally, why does the "show_divs()" function not execute in the child component on mount? Any assistance would be greatly appreciated.