Vue.js – 将数组中的函数作为道具传递

Question

导航栏.vue

组件NavigationBar.vue 在我的Vue.js 应用程序中使用，接受以下道具：

props: {
    title: String,
    actions: Array
}

这是NavigationBar 组件：

该组件接受数组以使用v-for 生成右侧的操作按钮。它们在父文件中定义，并且根据我的应用程序中的位置而有所不同。如果点击按钮，则需要调用指定的函数。

成员.vue

Members.vue 是父级。请注意其中的组件、操作和功能：

<template>
    <div>   
        <NavigationBar title='Members' actions="actionsArray" ></NavigationBar
    </div>  
</template>

<script>
import ...

export default {
  name: 'members',
  components: {
    NavigationBar
  },
  data () {
    return {
        actionsArray: [
            { btnText: 'Create', icon: 'mdi-plus-circle', function: 'createBtnClicked()' },
            { btnText: 'Edit', icon: 'mdi-pencil', function: 'editBtnClicked()' },
        ],
  }
  methods: {
    createBtnClicked() {
        // amazing things will happen here
    },
    editBtnClicked() {
        // it will be even greater when this button is clicked
    },
}

</script>

问题：

我无法让按钮的功能正常工作。将函数作为道具传递是否是正确的方法？

非常感谢您的帮助！谢谢:)

Answer 1

您似乎在传递字符串而不是实际函数。

尝试以下方法：

data () {
    return {
      actionsArray: [
        { btnText: 'Create', icon: 'mdi-plus-circle', function: this.createBtnClicked },
        { btnText: 'Edit', icon: 'mdi-pencil', function: this.editBtnClicked },
      ],
}

也许考虑明确声明 prop types 以使分配给 props 的 Vue 检查值具有正确的类型。