Laravel/Vue.jsでの$emitの周りのメソッド、引数の動きについて

最近vue.jsを触るようになりました。2日前とかですw

laravelと相性良さそうなのでワクワクしています！

今回はほんとに最初の部分で、vue.jsの$emitについて僕の今の感覚で説明していきます。(全部は知らないよってこと😊)

vueは3つの連携

vueが普段どのように動いているかですが、今の所は.vue拡張子ファイルと.html拡張子ファイル、そしてapp.jsが連携しています。

vueファイル

このファイルの中身も３つの構造からなっています。

表示される際に使用されるテンプレート

条件を決めたり関数を呼び出したりするスクリプト

ここで用意したテンプレートにcssを当てているスタイル

それぞれのファイルのつながりを見ていきましょう

<template>
  <div>
    <p>
      <button @click="start">lets start</button>ここのstartがメソッドを呼び出す時の名前になる必要がある
    </p>
    <div v-if="answer > 0">
      <input type="number" v-model.number="num" @keyup.enter="guess">
    </div>
  </div>
</template>

<script>
export default {
  // data プロパティの値がオブジェクトではなく、オブジェクトを返す関数になっている
  data () {
    return {
      answer: 0,
      num: 0,
      tryCount: 10
    }
  },
  methods: {
    // テンプレートに記載されているアクション名と同じになる
    start() {
      this.answer = Math.floor(Math.random() * (100 - 1) + 1)
      this.num = 0
      this.tryCount = 10
      this.$emit('start', this.tryCount)
    },

    guess() {
      // ここに飛んできた時点で引き算始まる
      this.tryCount -= 1
      if(this.answer === this.num){
        // 正解した場合の処理
        this.$emit('collect', tryCount)
      }

      if(this.tryCount === 0){
        // 負けた時の処理、loseメソッドの呼び出し
        this.$emit('lose', tryCount)
      } else if (this.answer < this.num){
        // 予想した数字が正解より小さい場合の処理
        this.$emit('lower', this.tryCount)
      } else {
        // 予想した数字が正解より大きい場合の処理
        this.$emit('higher', this.tryCount)
      }
    }
  }
}
</script>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue Component Tutorial</title>
</head>
<body>
  <div id="app">app.jsファイルにel: '#app'って書いてあるからこの中に記述したら動く
　<number-guess
    @start="start1" @startはvueファイルのメソッドの名前と一致させる。start1はapp.jsファイルのメソッド名と一致させる必要がある。
    @collect="collect1"
    @lose="lose1"
    ></number-guess>
    <p>{{ message }}</p>
    <p>残り：{{ tryCount }}回</p>
  </div>
  <script src="/js/app.js"></script>
</body>
</html>

import Vue from 'vue'

import NumberGuess from './components/NumberGuess.vue'
コンポーネンツファイルの下にあるNumberGuess.vueを呼び出している

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app', コンポーネントが効く範囲を指定している
    data: {
        message: 'スタート',　コンポーネントされた時のデフォルトの値が入っている
        tryCount: 0
    },
    components: {
        NumberGuess　コンポーネントする時の名前
    },
    methods: {
        start1(tryCount){　htmlファイルに用意されているstart1と名前が一致しているので処理が実行されます
            this.message = 'スタート！'
            this.tryCount = tryCount
        },
        collect1(tryCount){
            this.message = '正解！'
            this.tryCount = tryCount
        },
        lose1(tryCount){
            this.message = '残念！'
            this.tryCount = tryCount
        }
    }
});

何が言いたいか

.vue拡張子ファイルを用意する。

app.jsとかで作成した.vueファイルをimportしてくる

Vue.componentかもしくはnew Vueの中にconponentsを指定してhtmlファイルで使用できるようにする

Vue.component('htmlファイルで呼び出す時の名前', require('./components/ファイル名.vue').default);

components: {
        NumberGuess htmlファイルではnumber-guessという形になります
    }

vue拡張子に設定したメソッドはhtmlで@メソッド名として呼び出す

そのメソッドの処理を実行するにはhtmlとapp.jsファイルのメソッド名を一致させる必要がある

こんな感じでしょう。。。まだまだ始まったばかりなのであやふやなところはありますが、アウトプット忘れずに取り組んでいきます。

＜ Prev

Next ＞