如何将功能作为道具传递给子组件并在Vue中从那里调用它? [英] How to pass function as a prop to child component and call it from there in Vue?

问题描述

我知道不建议将功能作为道具传递给Vue中的子组件.但是，如果我要这样做，那怎么可能呢?这是我到目前为止尝试过的-

I know its not advised to pass function as a prop to the child component in Vue. But if I were to do it, how is that possible? This is what I have tried till now -

我的子组件-

<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)，hide_divs($ event)和其他函数.脚本是:-

Here, I'm calling show_divs($event), hide_divs($event) and other functions as you can see. Script is :-

<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()"，但未执行.任何帮助都将受到高度赞赏.

These functions are working fine in the parent component. What am I doing wrong here? Also in the child component on mount I have tried to run the "show_divs()" but it doesnt get executed. Any help is highly appreciated.

推荐答案

您可以从子组件中发出一个事件，然后在父组件中运行该事件:

You could emit an event from the child component and run it inside the parent one :

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

在父组件中:

  v-on:show_divs="show_divs"

方法:

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

这篇关于如何将功能作为道具传递给子组件并在Vue中从那里调用它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！