Запустить метод компонентов Vue по свойству

Question

Можно ли вызвать метод компонентов Vue, обрабатывая имя метода в одном из его свойств?

// main.vue
<navigation :button-left="goback()"></navigation>



// navigation.component.vue
...
props: ["buttonLeft"],
...
methods: {
  goback() {
    console.log('Run this.');
  },
},
...

Я пробовал это так, но выдает ошибку:

[Vue warn]: свойство или метод "возврат" не определен в экземпляре, но на него ссылаются во время рендеринга.Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.Смотри: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Answer 1

Да, это определенно возможно.

Самый простой способ - передать простую строку, например,

<navigation button-left="goback" />

Обратите внимание, что v-bind.

нет.Затем в вашем компоненте вы можете использовать значение prop.Что-то вроде ...

export default {
  template: `<button @click="runButtonLeft">Go</button>`,
  props: ['buttonLeft'],
  methods: {
    runButtonLeft () {
      if (typeof this[this.buttonLeft] === 'function') {
        this[this.buttonLeft]()
      } else {
        console.error('Invalid method name:', this.buttonLeft)
      }
    },
    goback () {
      console.log('Run this.')
    }
  }
}

Вы не указали, что следует использовать для запуска выполнения метода, поэтому я пошел с событием click .