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

Question

NavigationBar.vue

组件 NavigationBar.vue 在我的 Vue.js 应用程序中使用，接受以下属性:

props: {
    title: String,
    actions: Array
}

这是 NavigationBar 组件:

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

成员(member).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>

问题:

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

我真的很感激一些帮助!谢谢:)

Answer 1

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

尝试以下操作:

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

也许考虑声明显式 prop types让 Vue 检查分配给 props 的值是否具有正确的类型。