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

【问题标题】：Setter in child component compiles but raises and error子组件中的设置器编译但引发和错误
【发布时间】：2021-08-17 09:16:55
【问题描述】：

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

<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' | 计算选项”。类型上不存在属性“modalVisible” '() => 任何'。

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

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

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

【问题讨论】：

标签： typescript vue-component bootstrap-vue

【解决方案1】：

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

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

【讨论】：