.net VueJS从子变量修改父变量

我是VueJs的新手，感谢您的帮助。 我正在一起使用.NetCore MVC和Vue。它不是一个单页应用程序

问题：
在我的网站上，我有一个组件显示一个确认模式，在模式页面中有一个取消按钮，如果用户单击取消按钮，我想在父类中将modalBox属性设置为false

我所做的：这是我的组件

 Vue.component('modalquestion-box', {
  props: ['modalBox', 'message', 'messagedetail'],
data() {
    return {
        isHidden: true
    }
},
watch: {
    modalBox: function () {           
        if (this.modalBox == true)            
            $('#adjConfirmModal').modal('show');
    }
},
methods: {
    "cancelBtnSelected": function () {
        console.log('Cancel Selected');
        this.modalBox = false;         

    }

},
template: `<div class="modal fade" id="adjConfirmModal" tabindex="-1" role="dialog" aria-labelledby="adjConfirmModalTitle" aria-hidden="true">
             <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="adjConfirmModalTitle">Confirm</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                <div class="modal-body">
                    <p>Are you sure ?</p>

                </div>
                <div class="modal-footer">
                    <button type="button" v-on:click="cancelBtnSelected" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" v-on:click="adjConfirmed" class="btn btn-success">Confirm</button>
                    </div>
                </div>
            </div>
         </div>`
 });

}))

它正在工作，但我需要在父页面上单击两次确认按钮以显示模式消息。第一次单击将modalBox设置为true，并显示模态，然后当我单击同一个按钮时，它将设置为false。然后我再次单击以再次显示模态

---

基本上，当用户单击“取消”按钮时，我需要将modalBox属性更改为false。

在子组件中，使用

this.$emit（'closemessage'）

/**************潜艇*******************/
CancelBTSelected:函数（）
console.log（'cancelselected'）；
this.modalBox=false；
此.$emit（'closemessage'）//发送到父组件绑定的函数
}

谢谢你，高，但我也遇到了同样的错误。。。。。[Vue warn]：避免直接改变道具，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于道具值的数据或计算属性。道具正在变异：“modalBox”好的，我通过删除这个来修复它。modalBox=false；非常感谢Gao[Vue warn]：避免直接修改道具，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于道具值的数据或计算属性。您可以使用对象的父对象：

messageVisible:{bol:false}

，

<modalquestion-box v-bind:modal-box.sync="modalBox" v-bind:message="message" v-bind:messagedetail="messageDetail" v-on:closemessage="modalBox = false"></modalquestion-box>

new Vue({
el: '#app',
mounted: function () {
    this.fetchData();
},
data: {
    message: '',
    messageDetail: '',
    messageBox: false,
    modalBox: false

},
methods: {        
    "showConfirmModal": function () {
        this.modalBox = !this.modalBox ;            
    }


}