Vue中能否通过子组件data配置动态修改实例绑定的父级函数名

错误原因 #

你当前的写法存在作用域逻辑混淆：

• @emitfn="xxx" 是父组件模板中的绑定语法，这里的xxx只会从父组件的作用域查找变量/方法，无法直接读取子组件内部data里的emitname变量，因此会抛出未定义的错误。

方案1：子组件传递方法名参数，父组件动态调用 #

这是最常用的实现方式，逻辑清晰耦合度低：

修改步骤： #

1. 子组件触发emit时，把内部存储的目标方法名作为参数传递
2. 父组件接收参数后，通过方括号语法动态调用对应方法

完整可运行代码： #

<div id="root">
    <!-- 父组件接收子组件传过来的方法名，动态调用 -->
    <my-component btntext="TEXT" @emitfn="handleEmit"></my-component>
</div>

<script>
Vue.component('myComponent', {
    props: ['btntext'],
    template: '<button @click="childFN">{{btntext}}</button>',
    methods: {
        childFN: function(){
            // 把要触发的父方法名作为参数传递
            this.$emit("emitfn", this.emitname);
        }
    },
    data: function(){
        return {
            // 这里可以动态修改为fn1/fn2
            emitname: 'fn1'
        }
    }
});

var vm = new Vue({
    el: '#root',
    methods: {
        // 父组件统一接收方法名，动态调用
        handleEmit: function(methodName) {
            this[methodName]();
        },
        fn1: function(){
            alert('fn1');
        },
        fn2: function(){
            alert('fn2');
        }
    }
});
</script>

方案2：子组件动态修改触发的事件名 #

如果你需要直接切换触发的事件本身，可以直接把emit的事件名设为动态值：

修改步骤： #

1. 子组件$emit的第一个参数直接用this.emitname动态取值
2. 父组件提前绑定好所有可能触发的事件对应的方法

核心代码修改示例： #

// 子组件触发逻辑
childFN: function(){
    this.$emit(this.emitname); // 直接用动态变量作为事件名
}

<!-- 父组件提前绑定所有可能的事件 -->
<my-component btntext="TEXT" @fn1="fn1" @fn2="fn2"></my-component>

内容的提问来源于stack exchange，提问作者Fu-Han Zhang