在孙子组件中使用eval(func)，func具体的代码实现在祖父组件中，请问如何才能成功调用祖父组件中的方法

Question

问题描述

在孙子组件中使用eval(func)执行函数，但是func具体的方法实现在祖父组件中，如何才能在孙子组件中访问到祖父组件中的func方法

问题出现的环境背景及自己尝试过哪些方法

在假设func为纯函数名称的前提下

   // 孙子组件
    @Emit('sendFunc')
    sendFunc(func: string, params: any) {}
    
    destructorMethods(funcString: string) {
        let parameterItem: any[] = []
        let funcStr = ''
        if (funcString.includes('(')) {
            let start = funcString.indexOf('(')
            let end = funcString.indexOf(')')
            // 参数
            let parameterStr = funcString.substring(start+1, end)
            parameterItem = parameterStr.split(',')
            // 方法名
            funcStr = funcString.substring(0, start)
            
            this.$emit('sendFunc', funcStr, parameterItem)
         
        }
    }

祖父组件

<template>
    <div class="fire-alarm-component">
        <PageBox v-if="!!data" :data="data" :alarmMessage="alarmMessage" @sendFunc="analysisFunc"></PageBox>
    </div>
</template>

// script部分
analysisFunc(func, params) {
   const methods: DefaultMethods<Vue> = this.$options.methods as DefaultMethods<Vue>
   methods[func].call(this, ...params)
 }
      // showVideo即我需要实现的方法
        showVideo(id: number) {
            getVideoDto(id).then(res => {
                let { code, data } = res.data
                if (code === 200) {
                    if (!!data)
                        this.video = data
                }
            })
        }

PS:此方法只能针对func为纯函数名的情况下使用e.g: showVideo(15201003)，但是对带条件的函数无法执行e.g: func: 'item.type == 150 && showvideo(15203006)' 则没有办法执行

相关代码

祖父组件

<template>
    <div class="fire-alarm-component">
        <PageBox v-if="!!data" :data="data" :alarmMessage="alarmMessage" @showVideo="showVideo"></PageBox>
    </div>
</template>
// script--部分
showVideo(id: number) {
       getVideoDto(id).then(res => {
                let { code, data } = res.data
                if (code === 200) {
                    this.video = data
                }
            })
        }           

子组件部分 -- PageBox.vue

<template>
    <div class="page-box-wrap" ref="pageBoxCanvas">
        <StaticPicture :rate="rate" :data="data" v-on="$listeners"></StaticPicture>
    </div>
</template>

孙子组件部分

<template>
   <div @click.native="destructorMethods(data.func)"></div>
</template>
// script部分

// data
data: { func: string } = {
   func: 'showVideo(15203002)'
}

// methods

/**
* 这里的func，可能直接是一个函数名称，
* 也可能是一些条件+函数名 e.g: func: 'item.type == 150 && showvideo(15203006)'
*/
destructorMethods(func: string) {
  // 执行func，而func内具体的函数实现，在祖父组件中，这个孙子组件是一个中性组件，不涉及任何与后端代码的交互
  // 如何请求祖父组件中的showVideo()函数
   eval(func)
}

你期待的结果是什么？实际看到的错误信息又是什么？

我可以在孙子组件中，通过eval函数，顺利访问到祖父组件中，关于func方法的实现

Answer 1

// 祖父组件

    provide() {
      return {
        grandfather: this
      };
    },

// 孙子组件

inject: ['grandfather'],
methods: {
destructorMethods() {
   // 祖父组件的示例，这里就可以调用他的祖父的方法了
   this.grandfather
}
}

但我觉得你通过emit到祖父组件去处理事件也可以，不过如果层级比较深的话就很麻烦了