Vue.jsでコンポーネント化された画面を切り替える - 闘うITエンジニアの覚え書き

ここでは is 属性を使用して表示する画面を切り替える方法について記載する。
※Vue-router を使用する方法についてはここでは記載しない。

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>