VueJS изменить родительскую переменную от дочерней

Question

Я новичок в VueJs и спасибо за продвижение за помощь. Я использую .NetCore MVC и Vue вместе. Это не одностраничное приложение ...

ВОПРОС:
На моем сайте у меня есть компонент, отображающий модальное подтверждение, На модальной странице есть кнопка отмены, и если пользователь нажимает кнопку Кнопка «Отмена». Я хотел бы установить для свойства modalBox значение false в классе Parent.

Что я сделал: это мой компонент.

 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>`
 });

Моя страница макета

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

Основной Vue Класс - Родительский

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

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


}

} );

Это работает, но мне нужно дважды нажать кнопку подтверждения на родительской странице, чтобы показать модальное сообщение. первый щелчок устанавливает для modalBox значение true и показывает модальность, затем, когда я нажимаю ту же кнопку, он устанавливает значение false. затем я нажимаю еще раз, чтобы снова отобразить модальное значение.

В основном мне нужно изменить свойство modalBox на false, когда пользователь нажимает кнопку Отмена.

Answer 1

в подкомпонентах, используйте this.$emit('closemessage')

<modalquestion-box v-on:closemessage="modalBox = false"></modalquestion-box>

/************** sub *******************/
cancelBtnSelected: function () 
  console.log('Cancel Selected');
  this.modalBox = false;  
  this.$emit('closemessage') // A function that is sent to the parent component binding
}