通过属性触发 Vue 组件方法答案

【问题标题】：Trigger a Vue components method by property通过属性触发 Vue 组件方法
【发布时间】：2019-04-24 13:29:24
【问题描述】：

是否可以通过将方法名称处理到其属性之一来触发 Vue 组件方法？

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



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

我试过这样但它给了我一个错误：

[Vue 警告]：属性或方法“goback”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

【问题讨论】：

你的用例是什么？
目的是通过导航处理路由。导航的按钮因页面而异。对于某些按钮，需要处理固定的路由路径，但对于其他按钮，它只是打算在路由历史中退一步，这应该通过一种简单的方法来完成。
触发方法执行是什么意思？
您是否尝试将事件从子组件发送到父组件并在父组件中执行您想要的操作？

标签： javascript vue.js vuejs2 vue-component

【解决方案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 事件。

【讨论】：

是的，这会起作用，但我正在努力想一个用例。如果您每次实现组件时都想要一个事件的不同功能（在这种情况下是左侧按钮），我可能会发出他事件发生，并让父组件决定需要发生什么。喜欢<navigation @button-left="call-some-method-on-parent-component" />
我采用了这种方式，它符合我的需要。这对我来说是正确的。非常感谢。