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

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

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

Can I dynamically change parent's function name in the child component instance with my settings in data?

vue.js

components

emit