

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

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

子コンポーネント

[code]

    <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>
    
[/code]

親コンポーネント

[code]

    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();
            }
        }
    });
    
[/code]

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

[code]

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


CC BY-SA 3.0
2017-09-27T07:50:02.443
38231
2018-04-18T09:20:45.407
16768
question
javascript vue.js
vue.jsで親から子のイベントは呼べない？


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

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


CC BY-SA 3.0
2017-09-27T09:15:59.490
38235
2017-09-27T09:15:59.490
2022-09-27T22:35:34.400
-1
20206
38231
answer