Vue.js モーダル表示について

Question

vue-cliを使って動かしながら勉強中です。

試しに親のテンプレートに子テンプレートとしてモーダルを表示されたいのですが、
動的に表示するには一般的にどうしたらよいでしょうか。
また、親の__msg__がこの中で使えるようにしたいです。

現状はApp.vueの中のModal部分にModal.vueの中身を表示させているだけです。
※App.vueを親、Modal.vueを子としてモーダル表示になるようCSSがあたっている前提

jQueryでは親にモーダルを入れておいてCSSで非表示、
ボタンが押されたらshow()とかやっていましたが、
せっかくvueの勉強中なので先にモーダルがdomに出ない状態スタートでやってみたいです。

main.js

import Vue from 'vue'
import App from './App'
//import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  //router,
  components: { App },
  template: '<App/>'
})

App.vue

<template>
  <div id="app">
    親
    <button @click="modalOpen()">モーダル表示</button>
    <Modal></Modal>
  </div>
</template>

<script>
import Modal from './components/Modal'
  export default {
    data () {
      return {
        msg: "Hello!"
      }
    },
    components: {
      Modal
    },
    methods: {
      modalOpen () {
        console.log('modalOpen');
      }
    }
  }
</script>

Modal.vue

<template>
  <div>モーダル:{{msg}}</div>
</template>

Answer 1

v-ifで表示非表示を制御してやればいい感じですね。

<Modal v-if="isOpen"/>

そして、その変数をボタンを押したら状態が逆になるように用にコントロールしてあげます

<button v-on:click="isOpen = !isOpen">
 ボタン
</button>

@click=""はv-on:clickのエイリアスです。どちらを使っても良いでしょう。
@clickの中では普通のjavascriptが書けるので、私は直接ここでデータをいじることも多いです。

親から子に何かを渡す時はpropsを用います。

<Modal v-bind:message="parentMesage">

基本的ながら重要な点がいくつも出てますので整理しますと

• v-if
• v-on:click (@click)
• v-bind:message

ですね。
これらはぜひ、一度しっかりと公式のドキュメントを読んで理解されることをおすすめします。
https://jp.vuejs.org/v2/guide/syntax.html#v-on-%E7%9C%81%E7%95%A5%E8%A8%98%E6%B3%95

最後に、軽くサンプル実装をしてみましたので、躓いたら指針にしてみてください。
https://codesandbox.io/s/q9prqvrk9

Comments

[退会済みユーザー]

ありがとうございます。理解できました。
もう少しきちんとドキュメントを読んでみます。