Question

我有一个Vue组件，该组件通过props将回调函数传递给另一个子组件。但是，这是唯一在子级中未定义的部分。

我为此创建了一个repo，以便可以查看文件。在文件brDialog.vue中，我正在将按钮传递给函数click（），该函数应该可以访问从App.vue的props中传递的按钮回调，但是在brDialog中它是未定义的，而其他两件事随其传递存在（标签和数据）。

我将发布brDialog文件，并将在需要时发布其他文件，但认为链接回购目录比发布所有其他文件要容易。我对Vue有点陌生，因此可能是文档中缺少的内容。

如果您运行仓库并单击标题中的“表单测试”按钮，那么问题就出在这里。

brDialog.vue

<template>
  <v-container>
    <v-layout row wrap>
      <v-flex xs12>
        <v-dialog
          v-model="show"
          width="500"
          persistent
          >
          <v-card>
            <v-card-title> {{ title }} </v-card-title>
            <slot name="content"></slot>
            <v-card-actions>
              <v-btn
                v-for="button in buttons"
                :key="button.label"
                small
                @click.native="click(button)"
              >
                {{ button.label }}
              </v-btn>
              <v-btn
                v-if="showCloseButton"
                small
                @click.native="closeDialog()"
              >
                {{ closeButtonLabel }}
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import { props } from './props.js'

export default {
  name: 'brForm',
  components: {
    brTextField: () => import('@/controls/brTextField/brTextField.vue'),
    brTextArea: () => import('@/controls/brTextArea/brTextArea.vue'),
    brSelectList: () => import('@/controls/brSelectList/brSelectList.vue')
  },
  props: props,
  data () {
    return {

    }
  },
  methods: {
    async click (button) {
      const response = await button.callback(button.data)

      if (response.close) {
        this.closeDialog()
      }
    },
    closeDialog () {
      this.$emit('close')
    }
  },
  computed: {

  }
}
</script>

<style>

</style>

也许这是我在Vue中缺少$ emit之类的东西，但似乎应该可以使用。有人可以指出为什么将回调传递给brDialog后未定义吗？

Answer 1

callback是未定义的，因为您使用箭头函数定义了data属性（来自仓库中的App.vue），并在this上释放了Vue上下文：

data: () => {
  return {
    testingForm: {
      //...
      dialog: {
        props: {
          buttonCallback: this.testingFormSave, //<-- here
          buttons: [
            {
              label: 'Save',
              data: {},
              callback: this.testingFormSave //<-- and here
            }
          ]
        }
      }
    }
  }
},

要解决您的问题，请将data: () => {...}更改为data () {...}

在子vue中未定义通过props向子组件传递回调函数的方法

1 个答案: