소품 기능을 아동 구성 요소에 전달하고, 거기서부터 전화를 거는 방법을 Vue에서?

소품 기능을 아동 구성 요소에 전달하고, 거기서부터 전화를 거는 방법을 Vue에서?

나는 부에 있는 아동 구성요소에 소품으로서의 기능을 전달하라는 권고를 받지 않았다는 것을 안다.하지만 내가 그것을 한다면, 어떻게 그것이 가능할까?지금까지 노력한 것이 바로 이것이다.

내 자식 구성 요소 -

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

여기서 show_divs($event), hid_divs($event) 및 다른 기능들을 보시다시피 호출한다.스크립트는 :-

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

상위 구성 요소 템플릿:-

  <ResultShowcase

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

  </ResultShowcase>

이 기능들은 상위 요소에서 잘 작동한다.내가 여기서 뭘 잘못하고 있는 거지?또한 마운트의 하위 구성 요소에서 "show_divs()"를 실행하려고 했지만 실행되지 않는다.어떤 도움이라도 높이 평가된다.

자식 구성 요소에서 이벤트를 내보내고 부모 구성 요소 내에서 이벤트를 실행할 수 있다.

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

상위 구성 요소:

  v-on:show_divs="show_divs"

방법:

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

참조URL: https://stackoverflow.com/questions/61029499/how-to-pass-function-as-a-prop-to-child-component-and-call-it-from-there-in-vue