1

例えば、複数箇所で再利用されるモーダルを開くのに
親に状態を持たせず、親から子のメソッドを呼ぶことはできないのでしょうか?
下記のような記述の仕方でかけないでしょうか?

親でtrue・falseをv-bindすればいいだけなのですが、子の状態を親が管理するのが
なんとなく違和感ありまして...

子コンポーネント

<template>
    <div id="modal" v-if="showModal">
       モーダル!
       <button type="button" @click="close()">閉じる</button>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                showModal: false
            }
        },
        methods: {
            show() {
                this.showModal = true;
            },
            close() {
                this.showModal = false;
            },
        }
    };
</script>

親コンポーネント

import Vue from 'vue';
import modalComponent from '../components/modal.vue';
var app = new Vue({
    el: '#app',
    data: {
    },
    components: {
        modal: modalComponent
    },
    methods: {
        show() {
            modal.show();
        },
        close() {
            modal.close();
        }
    }
});

親コンポーネントが設置されるHTML

<div id="myBukken">
    <button type="button" @click="show()">モーダルオープン</button>
    <modal></modal>
</div>

1 件の回答 1

1

親コンポーネントがv-ifで子コンポーネントの表示/非表示を制御するほうが自然だと思います。下の公式デモでもそうしています。

公式 example - Modal
https://v2.vuejs.org/v2/examples/modal.html

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。