Блог

У меня есть два компонента App.vue и ModalWindow.vue

Я пытаюсь открыть модальное окно (ModalWindow.vue) в родительском компоненте App.vue при нажатии кнопки с событием «toggle», которое вызывает функцию «toggleModal»

Но я не могу, пожалуйста, скажите мне, в чем моя ошибка

This.is мое приложение.vue

 <button @toggle="toggleModal">  
  <svg class="user-nav__icon"  >
    <use xlink:href="@/img/sprite.svg#icon-chat"></use>
  </svg>
</button>

<script>
import ModalWindow from '../UI/ModalWindow.vue'

export default {
  components: {
    ModalWindow
  },
  mixins: [ModalWindow],
  methods: {  
     toggleModal() {
     this.toggle();
    }
  }
}
</script>
  

И ЭТО МОЙ ModalWindow.vue

 <template>
<template>
    <div>        
        <transition name="fade">
            <div class="modal">
                <div class="modal-message">
                    <div class="modal-header">
                        <h2>Vue Modal</h2>
                    </div>
                    <div class="modal-body">
                        <p>Modals are so easy in Vue.js!</p>
                    </div>
                </div>

            </div>
        </transition>
    </div>
</template>

<script>
export default {
        name: 'ModalWindow',
       data() {
              return {  
           show: false         
              }                
       },
       methods: {  
        toggle() {
            this.show = !this.show
        }
    }
}
</script>
  

нет необходимости в $emit, поскольку вы нигде не прослушиваете отправленное событие. Я думаю, глядя на ваш вопрос, вашему требованию нужен механизм микширования для вызова метода переключения вашего modal.vue.

чуть ниже

 components: {
    ModalWindow
  }
  

в вашем app.vue добавьте строку

 mixins: [ModalWindow]
  

и добавьте строку ниже в свой метод toggleModal

 this.toggle();
  

чуть ниже this.показать строку. Вы также можете удалить ModalWindow из объекта components, если микшины работают.