Cómo pasar función como apoyo al componente secundario y llamarlo desde allí en Vue?

Yash Gaur:

Sé que no es aconsejado para pasar función como apoyo al componente de niño en el Vue. Pero si tuviera que hacerlo, ¿cómo es posible? Esto es lo que he tratado hasta ahora -

Mi componente secundario -

<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>

Aquí, estoy llamando show_divs ($ eventos), hide_divs ($ evento) y otras funciones que se pueden ver. Script es: -

<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());
  }
}

Padres componente de la plantilla es: -

  <ResultShowcase

              :updateOnResize="updateOnResize"
              :show_divs="show_divs"
              :hide_divs="hide_divs"
              :find_cordinates="find_cordinates"
              :divsToBeRendered="divsToBeRendered"
              >

  </ResultShowcase>

Estas funciones están trabajando bien en el componente de los padres. ¿Qué estoy haciendo mal aquí? También en el componente secundario en el monte He tratado de ejecutar los "show_divs ()", pero es imposible encontrar ejecutado. Cualquier ayuda es muy apreciada.

Boussadjra Brahim:

Se podría emitir un evento desde el componente secundario y ejecutarlo en el uno de los padres:

 @mouseover="$emit('show_divs',$event)"

en el componente de los padres:

  v-on:show_divs="show_divs"

método:

methods:{
  show_divs(event){
    console.log(event)
  }
}