vue-cliを使って動かしながら勉強中です。
試しに親のテンプレートに子テンプレートとしてモーダルを表示されたいのですが、
動的に表示するには一般的にどうしたらよいでしょうか。
また、親の__msg__がこの中で使えるようにしたいです。
現状はApp.vueの中のModal部分にModal.vueの中身を表示させているだけです。
※App.vueを親、Modal.vueを子としてモーダル表示になるようCSSがあたっている前提
jQueryでは親にモーダルを入れておいてCSSで非表示、
ボタンが押されたらshow()とかやっていましたが、
せっかくvueの勉強中なので先にモーダルがdomに出ない状態スタートでやってみたいです。
main.js
js
1import Vue from 'vue' 2import App from './App' 3//import router from './router' 4 5Vue.config.productionTip = false 6 7new Vue({ 8 el: '#app', 9 //router, 10 components: { App }, 11 template: '<App/>' 12}) 13
App.vue
html
1<template> 2 <div id="app"> 3 親 4 <button @click="modalOpen()">モーダル表示</button> 5 <Modal></Modal> 6 </div> 7</template> 8 9<script> 10import Modal from './components/Modal' 11 export default { 12 data () { 13 return { 14 msg: "Hello!" 15 } 16 }, 17 components: { 18 Modal 19 }, 20 methods: { 21 modalOpen () { 22 console.log('modalOpen'); 23 } 24 } 25 } 26</script>
Modal.vue
html
1<template> 2 <div>モーダル:{{msg}}</div> 3</template>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/02/19 14:53