属性或方法“名称”未在实例上定义，但在渲染期间引用答案

【问题标题】：Property or method "Name" is not defined on the instance but referenced during render属性或方法“名称”未在实例上定义，但在渲染期间引用
【发布时间】：2018-05-29 22:51:57
【问题描述】：

我在 vue.js 的模板中关闭我的模式时遇到问题

这是我的代码：

var something = new Vue({
    el: "#something",
    data: {
        showModal: false
    }
});

Vue.component("mymodal",
{
    template: `
      <button class="button" @click="showModal=false">Cancel</button>
    `
});

export default something;

这是我的html

<div id="something">
        <mymodal v-show="showModal"></mymodal>
        <button @click="showModal = true" class="button is-info">Open Modal</button>
</div>

基本上，我的打开模式工作正常。只是在我的 .js 文件中的模板内触发的关闭模式，我有一个错误提示，

属性或方法“showModal”未在实例上定义，但在渲染期间引用。确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件，通过初始化属性。

【问题讨论】：

这里的错误描述性很强：您的组件没有任何名为showModal 的属性。你能展示这个组件是如何在你的根 html 中使用的吗？
你好@raina77ow。我在我的 html 中添加了代码和标签
它正在寻找一种方法而不是更改 showModal 变量，因为该变量在其他组件中，而不是在模态组件中
我建议使用事件发射器来完成你的模态功能
我已经尝试过使用方法：for events in opening and close，但还是有同样的问题。

标签： javascript vue.js vue-component

【解决方案1】：

试试这个：

var something = new Vue({
    el: "#something",
    data: {
        showModal: false
    }
});

Vue.component("mymodal",
{
    template: `
      <button class="button" @click="closeModal()">Cancel</button>
    `,
    methods : {
        closeModal() {
            this.$emit('closeModal');
        }
    }
});

export default something;

在你的 html 中：

<div id="something">
        <mymodal v-show="showModal" v-on:close-modal="showModal = false"></mymodal>
        <button @click="showModal = true" class="button is-info">Open Modal</button>
</div>

【讨论】：

哦，我有一个警告说，“事件“closemodal”在组件中发出，但处理程序注册为“closeModal”。请注意，HTML 属性不区分大小写，你使用 in-DOM 模板时不能使用 v-on 来监听 camelCase 事件。您应该使用“close-modal”而不是“closeModal”。
尝试使用 v-on:close-modal="showModal = false"。我忘记了这条规则
哦，我尝试使用 - 在我的 html 中，警告消失了，但模式没有关闭。
这很奇怪，它应该可以工作。事件发出后你的 showModal 值是多少？
我没有看到任何值。