typescript - 子组件中的设置器编译但引发和错误

Question

在我的组件中，我有这个简单的可见性参数：

<template>
  <b-modal :visible.sync="_modalVisible" size="md" title="Add new event group" centered header-bg-variant="light" ok-title="Add" ok-variant="info" @hide="hideModal()">
    Hello.
  </b-modal>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "AddNewEventGroupModal",
  data() {
    return {
    }
  },

  props: {
    // Variables.
    modalVisible: Boolean
  },

  computed: {
    _modalVisible: {
      get: function () {
        return this.modalVisible; // ERROR here!!
      }
    }
  },

  methods: {
    hideModal() {
      this.$emit("toggle-visibility", false);
    }
  }
});
</script>

但是，此代码有效（编译成功），但不久后引发错误：

类型 '(() => any) 上不存在属性 'modalVisible' | 计算选项”。类型 '() => any' 上不存在属性 'modalVisible'。

我想了解为什么会发生这种情况以及如何解决它。有趣的是，它可以工作（功能正常并且已编译），但仍然会引发错误。

如果它很重要：父母这样称呼孩子：

<add-new-event-group-modal :modalVisible.sync="addNewVisibility" :eventGroupApi="eventGroupApi" :newEventGroup="newEventGroup" @toggle-visibility="toggleAddNewVisibility"></add-new-event-group-modal>

标签： typescriptvue-componentbootstrap-vue

Answer 1

从:visible.sync="_modalVisible"，我猜在某些时候计算的变量_modalVisible会得到更新，问题是，它没有设置器，尝试添加一个。

computed: {
    _modalVisible: {
        get: function () {
            return this.modalVisible; // ERROR here!!
        },
        set(val) {
            this.modalVisible = val;
        }
    }
},