可以用数据中的设置动态地更改子组件实例中父函数的名称吗？

Question

初学者寻求帮助。非常感谢。

可以用数据中的设置动态地更改子组件实例中父函数的名称吗？

它的工作原理很好：

但是我需要这样做：，Vue给了我错误.

这是我的密码：

<div id="root">
    <my-component btntext="TEXT" @emitfn="emitname"></my-component>
</div>

<script>
Vue.component('myComponent', {
    props: ['btntext'],
    template: '<button @click="childFN">{{btntext}}</button>',
    methods: {
        childFN: function(){
            this.$emit("emitfn");
        }
    },
    data: function(){
        return {
            emitname: 'fn1'
        }
    }
});

var vm = new Vue({
    el: '#root',
    methods: {
        fn1: function(){
            alert('fn1');
        },
        fn2: function(){
            alert('fn2');
        }
    }
});
</script>

Answer 1

您可以使用this.$options.methods['methodName']找到一种方法。

在您的情况下，您可以使用以下内容：

父组件

<my-component btntext="TEXT" @emitfn="emitfn"></my-component>

methods: {
   fn1: function(){
      alert('fn1');
   },
   fn2: function(){
      alert('fn2');
   },
   emitfn(emitname) {
      this.$options.methods[emitname]();
   },
}

子组件

methods: {
   childFN: function(){
      this.$emit("emitfn", this.emitname);
   }
},