Как в vue.js работать с компонентами?

Question

[Михаил Смирнов]

Добрый день!

Как работать со свойствами и методами подключенного компонента StoreModalComponent?
Пробую через StoreModalComponent.showModal = true; но выдает ошибку

<template>
    <div>
        <button @click="openStore">Открыть склад</button>
        <store-modal-component></store-modal-component>
    </div>
</template>
<script>
    import StoreModalComponent from './StoreModalComponent'
    import axios from 'axios'
    export default {
        data() {
            return {}
        },
        components: {
            StoreModalComponent
        },
        mounted: function () {},
        computed: {},
        methods: {
            openStore: function() {
                StoreModalComponent.showModal = true;
            },
        },
        watch: {},
    }
</script>

Код компонента StoreModalComponent

<template>
    <div>
        <transition name="modal">
            <div class="modal-mask" v-if="showModal" @close="showModal = false">
                <div class="modal-wrapper">
                    <div class="modal-container">

                        <div class="modal-header">
                            <slot name="header">
                                Склад

                                <button class="modal-default-button" @click="$emit('close')">
                                    &times;
                                </button>
                            </slot>
                        </div>

                        <div class="modal-body">
                            <slot name="body">

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

<script>
    export default {
        data() {
            return {
                showModal: false
            }
        },
        methods: {}
    }
</script>

Answer 1

[askhat]

1. В компоненте StoreModalComponent showModal удалить из data и перенести в props:
   

   export default {
     props: {
       showModal:{ type: Boolean, default: false }
     }
   }

   
   
   
2. В родительском компоненте создать data свойство showModal и подписать на него только что созданные prop компонента StoreModalComponent:
   

   <template>
     <store-modal-component :show-modal="showModal" />
   </template>

   
   
   

Answer 2

[0xD34F]

Отображаться окну или нет - это не его, окна, дело. Соответственно, showModal переносите в родительский компонент и передаёте в окно как параметр.

В родителе:

data: () => ({
  showModal: false
})

<button @click="showModal = true">Открыть склад</button>
<store-modal-component
  :show-modal="showModal"
  @close="showModal = false"
></store-modal-component>

В окне:

props: [ 'showModal' ]

Также надо будет в .modal-mask заменить @close="showModal = false" на @click.self="$emit('close')" (модификатор self - это чтобы не обрабатывать клики с вложенных элементов, т.е., собственно окна и его содержимого).

https://jsfiddle.net/jesyd734/