yuheijotaki.com

Vue.js / JSON から情報を引っ張ってくる その8

f:id:jotaki:20190212100544p:plain

やること

  • Vue Router を使用してコンポーネント間のメソッドの受け渡しする。

ファイル構成

myButton.vue で仕込んだクリックイベントを App.vue へ渡す。

.
├── index.js
├── App.vue
├── /router/
|   └── index.js
└── /components/
    └── /page/
    |   ├── top.vue
    |   └── about.vue
    └── /common/
    |   ├── myHeader.vue
    |   └── myFooter.vue
    └── /element/
        └── /button/
            └── myButton.vue

index.js

受け渡しとはあまり関係ないですが、Vue Router を使う

import Vue from 'vue'
import Router from 'vue-router'
import top from '@/components/page/top'
import about from '@/components/page/about'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: "/",
      name: 'top',
      component: top
    },
    {
      path: "/about",
      name: 'about',
      component: about
    }
  ]
})

App.vue

myButton.vue で仕込んだ　‘event-test’ のメソッドを myButton のクリックイベントとして登録

<template>
  <div id="app">
    <myHeader></myHeader>
    <main>
      <router-view></router-view>
      <myButton @event-test="clickAlert"></myButton>
    </main>
    <myFooter></myFooter>
  </div>
</template>

<script>
import "normalize.css";
import myHeader from './components/common/myHeader.vue';
import myFooter from './components/common/myFooter.vue';
import myButton from './components/element/button/myButton.vue';

export default {
  name: 'App',
  components: {
    myHeader,
    myFooter,
    myButton
  },
  methods: {
    clickAlert: function(event) {
      alert('event test');
    }
  }
}
</script>

myButton.vue

‘event-test’ を $emit しておく

<template>
  <button @click="emitEventTest">Button</button>
</template>

<script>
export default {
  name: 'myButton',
  methods: {
    emitEventTest () {
      this.$emit('event-test',event)
    }
  }
}
</script>

まとめ

Github

  • やること簡単にしようと思ってたらJSONは関係のない内容になってしまった。（前回の引き継いだ結果、ちょっと複雑になりすぎたので、簡単なコンテンツ内容にして進めるようにしました。）
  • 次回はこれをベースにポートフォリオのサイトを作るの目標にします。ふつうのWebサイトなら Vue.js 使って構築できそうな気がしてきました。
  • コンポーネントについては、Vue.jsコンポーネント入門 | Hypertext Candy がわかりやすそうです。

ほか参考にした記事など