目次 †
概要 †ここでは is 属性を使用して表示する画面を切り替える方法について記載する。 プロジェクトの作成 †vue create sample-project cd sample-project イベントハンドリング用オブジェクト †コンポーネント間でイベントのやり取りを行う為のオブジェクトを作成しておく。 src/EventHub.js import Vue from 'vue' const EventHub = new Vue() export default EventHub メイン画面の作成 †src/main.js import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App) }).$mount('#app') src/App.vue <template> <div id="app"> <!-- ヘッダ --> <Header /> <!-- メインコンテンツ --> <component v-bind:is="currentView"></component> <!-- フッタ --> <Footer msg="Footer Content"/> </div> </template> <script> import EventHub from './EventHub.js' import Header from './components/Header.vue' import Top from './components/Top.vue' import Page1 from './components/Page1.vue' import Page2 from './components/Page2.vue' import Footer from './components/Footer.vue' export default { name: 'app', components: { Header, Top, Page1, Page2, Footer }, data: function(){ return { currentView: "Top" } }, methods: { // 画面の切り替え switchView(viewName) { this.currentView = viewName; } }, created: function(){ // switchViewイベント発生時に画面を切り替える EventHub.$on('switchView', this.switchView) } } </script> <style> html,body { margin: 0; } #app .main { padding-bottom: 40px; } #app .footer { position: fixed; bottom: 0; width: 100%; } </style> ヘッダコンポーネント †src/components/Header.vue <template> <div class="header" style="background: #333; color: #fff;"> <ul id="header-menu"> <li v-on:click="menuClicked('Top')">TOP</li> <li v-on:click="menuClicked('Page1')">画面1</li> <li v-on:click="menuClicked('Page2')">画面2</li> </ul> </div> </template> <script> import EventHub from '../EventHub.js' export default { name: 'Header', methods: { "menuClicked" : function(pageName){ // メニューがクリックされた時は switchView イベントを発火する EventHub.$emit('switchView', pageName) }, } } </script> <style scoped> #header-menu { list-style-type: none; margin: 0; padding: 0; } #header-menu.ul,#header-menu li { display: inline-block; } #header-menu li { padding: 10px; border-right: 1px dotted #fff; cursor: pointer; } #header-menu li:hover { opacity: 0.8; text-decoration: underline; } </style> フッタコンポーネント †src/components/Footer.vue <template> <div class="footer" style="background: #333; color: #fff"> <div>{{ msg }}</div> </div> </template> <script> export default { name: 'Footer', props: { msg: String } } </script> 各画面コンポーネント †src/components/Top.vue <template> <div class="main"> <h1>Top content</h1> </div> </template> <script> export default { name: 'Top' } </script> src/components/Page1.vue <template> <div class="main"> <h1>Page1 content</h1> </div> </template> <script> export default { name: 'Page1' } </script> src/components/Page2.vue <template> <div class="main"> <h1>Page2 content</h1> </div> </template> <script> export default { name: 'Page2' } </script> |