子组件中的Setter已编译，但引发并出错

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>

然而，这段代码有效(编译成功(，但不久后引发错误：

类型"((=>"上不存在属性"modalVisible"；任何(|ComputedOptions"。类型上不存在属性"modalVisible"'((=>任何"。

我想了解为什么会发生这种情况，以及如何修复它。很有趣的是，它可以工作(功能还可以，并且经过编译(，但仍然会引发错误。

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

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

Answer 1

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

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