时间戳

首页 > 解决方案 > 我可以使用数据中的设置动态更改子组件实例中的父函数名称吗？

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

问题描述

初学者寻求帮助。太感谢了。

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

它可以正常工作： <my-component btntext="TEXT" @emitfn="fn1">

但我需要这样做： <my-component btntext="TEXT" @emitfn="emitname"> 而 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>

标签： vue.jscomponentsemit

解决方案

您可以使用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);
   }
},

推荐阅读