Vue.js を１から学んでみた。にて書いてきましたが、
長くなり編集しにくくなってきたので、分割しました（こんなやりかたしないのかな？知りたい。）

8-1. Vue CLIとは

Vueのフレームワーク。
簡単に利用でき、サーバーを立ち上げることができる。

$ vue create vue-cli-sample


Vue CLI v4.4.6
? Please pick a preset: default (babel, eslint)


Vue CLI v4.4.6
✨  Creating project in /Users/shinri/development/study/vuejs/vue-cli-sample.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

・・・省略

$ cd vue-cli-sample/
$ npm run serve

> vue-cli-sample@0.1.0 serve /Users/shinri/development/study/vuejs/vue-cli-sample
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 2287ms                                                                                                                                                                                       13:24:23


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.100.16:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

http://localhost:8080/ にアクセスするとVueの画面が表示される。

8-2. Vue CLI構成

初期ディレクトリ概要

node_modules
- nodeでインストールされた様々なモジュール群
- 何か便利なライブラリを見つけたらnpmでインストールするが、ここに入る
public
- 静的なファイルを置いておく。webpackの対象にならない。
- index.html しか初期は入っていない（favicon除く）。
- あんまり追加しない。
src
- vueファイルを書いてアプリを作る（雑）
- webpackの対象となる

初期ファイル概要

.gitIgnore
- gitにpushしないファイル/ディレクトリの指定
babel.config.js
- ES5にする時の指定。
- 初期設定のままで基本はOK。複雑なものを作る場合は別。
package.json
- 使用するライブラリのバージョンを指定する
- scriptsでは、コマンドのオプションを指定する。$npm run serveは、"serve": "vue-cli-service serve"のように定義されている
package-lock.json
- git等で複数人で開発する場合、こちらを使ってインストール・・・という曖昧な認識。
- 「package-lock.jsonについて知りたくても聞けなかったこと」を参考にさせていただくのがベスト。

srcディレクトリ詳細

assetsディレクトリ

ロゴファイルなど、リソースを入れる。

main.js

render関数で、App.vueオブジェクトを指定しているのみ。
#appにマウントしているが、これはpublic/index.htmlに指定されている。
つまり、App.vueオブジェクトをindex.htmlに表示させていることになる。

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- ↓ここに#appが指定されている -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

src/main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

単一ファイルコンポーネントと呼ばれる。
画面に表示する内容を、このコンポーネントで実装する。

なお、.vueファイルはVue CLIで使われることで、webpackにて単一コンポーネントとして扱われる。
import App from './App.vue'のように定義すると、.vueファイル内で単一コンポーネントとして使用できる。

以下の初期作成の例では、HellowWorld.vueコンポーネントを作成し、
それをApp.Vueでタグで使うことで画面を表示させている。

src/App.Vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

src/components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

本番用ビルド

$ npm run build を実行することで、src,publicの内容が最適化ビルドされ、distディレクトリが作成される。
これをそのまんまリリースできる。

8-3. Vueコンポーネントの基本

Vueコンポーネント（.vueファイル）は、以下で構成される。

template
- DOMとして展開される内容を記述する箇所
- scriptにrender関数があれば、不要。
- 注意点：ルート要素は必ず１つであること。エラーになる
script
- JavaScriptで記載する箇所
- 特に必要なければ、不要。
style
- CSSを記載する箇所
- CSSが不要であれば、不要。

templateとscriptだけを書いて簡単なvueにて実行してみる

App.vue

<template>
  <p>こんにちは{{name}}さん</p>
</template>

<script>
export default {
  data: function() {
    return {
      name: "太郎"
    }
  }
}
</script>

<!-- styleは消しました -->

http://localhost:8080/ にアクセスするとVueの画面が表示される。

補足：ルート要素は１つ

以下のように、template配下にルート要素を2つ以上持つと、コンパイルエラーとなる。

hoge.vue

<template>
  <p>こんにちは{{name}}さん</p>
  <p>こんにちは{{name}}さん</p>
</template>

 error  in ./src/FirstName.vue?vue&type=template&id=50ec6832&

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 

  Errors compiling template:

  Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

  1  |  
  2  |  <p>こんにちは{{name}}さん</p>
     |                         
  3  |  <p>こんにちは{{name}}さん</p>
     |  ^^^^^^^^^^^^^^^^^^^^^^
  4  |

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

一つにしなさいと怒られます。ただ、シンプルに機能を分けるサポートをしてくれるという意味では助かることかと。

8-4. Vueコンポーネントのグローバル登録

どこの.vueでも単一コンポーネントを使えるように、グローバル登録を行う。
グローバル登録はmain.jsに対して行う。

以下のように、FirstName.vueを新規作成し、グローバル登録した後、そのコンポーネントを使用する。

FirstName.vue

<template>
  <p>こんにちは{{name}}さん</p>
</template>

<script>
export default {
  data: function() {
    return {
      name: "次郎"
    }
  }
}
</script>

App.vue

<template>
  <!-- グローバル登録したコンポーネントを使用 -->
  <FirstName></FirstName>
</template>

main.js

import Vue from 'vue'
import App from './App.vue'
// コンポーネント追加
import FirstName from './FirstName.vue'

Vue.config.productionTip = false

// グローバル登録
Vue.component("FirstName", FirstName);

new Vue({
  render: h => h(App),
}).$mount('#app')

結果

8-5. Vueコンポーネントのローカル登録

グローバル登録の次にローカル登録について。
単一コンポーネントのローカル登録と同じく、Js内（今回で言うと、<script>内）でimportし、vueインスタンスのcompnentに登録する。

以下のように、LastName.vueを新規作成し、ローカル登録した後、そのコンポーネントを使用する。
※main.jsとFirstName.vueは変わらないので割愛。

LastName.vue

<template>
  <div>
    <p>私は{{name}}です</p>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      name: "山田"
    }
  }
}
</script>

App.vue

<template>
  <!-- ルートは一つ -->
  <div>
    <!-- グローバル登録したコンポーネントを使用 -->
    <FirstName></FirstName>
    <!-- ローカル登録したコンポーネントを使用 -->
    <LastName></LastName>
  </div>
</template>

<script>
import LastName from "./LastName.vue";

export default {
  components: {
    LastName: LastName
  }
}
</script>

結果

8-6. VueコンポーネントのCSS

<style>タグにCSSを書けば良いが、必ずscopedをつける。
そうすることで、同じvue内のtemplateにのみ適用させることができる。

FirstName.vue

<template>
  <div>
    <p>こんにちは{{name}}さん</p>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      name: "次郎"
    }
  }
}
</script>

<!-- `scoped`をつける -->
<style scoped>
div {
  border: 1px blue solid;
}
</style>

内部的にみると、該当タグに識別子をつけて判断している感じ。

scopedを付けないと、全divに反映されてしまう

<!-- `scoped`をつけない -->
<style>
div {
  border: 1px blue solid;
}
</style>

8-7. コンポーネント間のデータの受け渡し（親→子:props）

基本：プリミティブ/配列/オブジェクト

親→子の場合、propsを使います。
例として、App.vueから数値と文字列を受け渡すやり方を載せます。
注意：propsは変更値不可なので、子画面で利用する場合は変数に詰め替えてから使う。

FirstName.vue

<template>
  <div>
    <p>こんにちは{{name}}さん</p>
    <button @click="changeMethod">押した分だけ年齢増えます</button>
    <p>年齢：{{age}}</p>
    <p>性別：{{gender}}</p>
  </div>
</template>

<script>
export default {
  // 親→子の受け渡しに`props`を使う。
  // 子では受け口として定義するイメージ。
  // 書き方は配列かオブジェクトで可能。
  // ただ、詳しく書きたいのであれば、オブジェクト型とする。
  props: {
    // 変数名：キャメルケース
    yourAge: {
      type: Number,  // 型
      required: true // 必須かどうか
    },
    gender: {
      type: String,
      required: true
    }
  },
  data: function() {
    return {
      name: "次郎",
      // propsのデータは変更不可が推奨されているため、
      // このようにdataに設定する
      age: this.yourAge
    }
  },
  methods:{
    changeMethod: function() {
      // propsの値は変更させない
      this.age += 1
    }
  },
}
</script>

<style scoped>
div {
  border: 1px blue solid;
}
</style>

App.vue

<template>
  <div>
    <!-- ケバブケースでOK -->
    <!-- propsの値を設定する。v-bindも勿論OK! -->
    <FirstName :your-age="defaultAge" gender="男性"></FirstName>
    <LastName></LastName>
  </div>
</template>

<script>
import LastName from "./components/LastName.vue";

export default {
  data: function() {
    return {
      defaultAge: 15
    }
  },
  components: {
    LastName: LastName
  }
}
</script>

結果

応用：slot

htmlをそのまんま渡す場合、
v-htmlタグを使って頑張ればいけそうだけど、めんどくさい笑
その代わりにVueコンポーネント内に（DOM要素のように）htmlを書けるようにすることができる機能がある。

そのためにslotタグとv-slotディレクティブを使う ~~（ジャグラー打ちてー）~~。

1つslotの例

LastName.vue

<template>
  <div>
    <!-- slotタグを指定 -->
    <slot></slot>
  </div>
</template>

App.vue

<template>
  <div>
    <FirstName :your-age="defaultAge" gender="男性" @my-click="emitData = $event"></FirstName>
    <!-- 要素にHTMLを指定 -->
    <LastName>
      <p>私は山田です</p>
      <p>職業はSEです</p>
    </LastName>
    <p>思っていた年齢{{defaultAge}}歳でしたが、{{emitData}}歳違っていたようでした。すみません。</p>
  </div>
</template>

<script>
import LastName from "./components/LastName.vue";

export default {
  data: function() {
    return {
      defaultAge: 15,
      emitData: 0
    }
  },
  components: {
    LastName: LastName
  }
}
</script>

結果

複数のslotの例

結論から言うと、templateタグと、v-slotディレクティブを使う。

LastName.vue

<template>
  <div>
    <!-- slotタグのnameにテンプレート名を指定 -->
    <slot name="name"></slot>
    <hr>
    <!-- slotタグのnameにテンプレート名を指定 -->
    <slot name="job"></slot>
  </div>
</template>

App.vue

<template>
  <div>
    <FirstName :your-age="defaultAge" gender="男性" @my-click="emitData = $event"></FirstName>
    <LastName>
      <!--  v-slotでテンプレート名を指定 -->
      <template v-slot:name>
        <p>私は山田です</p>
      </template>
      <!--  v-slotでテンプレート名を指定 -->
      <template v-slot:job>
        <p>職業はSEです</p>
      </template>
    </LastName>
    <p>思っていた年齢{{defaultAge}}歳でしたが、{{emitData}}歳違っていたようでした。すみません。</p>
  </div>
</template>

<script>
import LastName from "./components/LastName.vue";

export default {
  data: function() {
    return {
      defaultAge: 15,
      emitData: 0
    }
  },
  components: {
    LastName: LastName
  }
}
</script>

結果

デフォルトslotの例

templateがついていないものは、Vue.jsが<template v-slot:defalut>を勝手に作成しまとめる。
あくまでも、slotを使う場合はtemplateが必要ということ。

App.vue

<template>
  <div>
    <FirstName :your-age="defaultAge" gender="男性" @my-click="emitData = $event"></FirstName>
    <LastName>
      <!-- templateがついていないのは、デフォルトスロットとしてまとめられる１ -->
      <p>デフォルトスロット用１</p>
      
      <!--  v-slotでテンプレート名を指定 -->
      <template v-slot:name>
        <p>私は山田です</p>
      </template>
      <!--  v-slotでテンプレート名を指定 -->
      <template v-slot:job>
        <p>職業はSEです</p>
      </template>

      <!-- templateがついていないのは、デフォルトスロットとしてまとめられる2 -->
      <p>デフォルトスロット用２</p>
    </LastName>
  </div>
</template>

LastName.vue

<template>
  <div>
    <!-- デフォルトスロット表示用 -->
    <slot></slot>
    <hr>
    <!-- slotタグのnameにテンプレート名を指定 -->
    <slot name="name"></slot>
    <hr>
    <!-- slotタグのnameにテンプレート名を指定 -->
    <slot name="job"></slot>
  </div>
</template>

結果

スロットプロパティ

スロットプロパティを使えば、子のdataを使うことができる。

親の指定
- <template v-slot:name="slotProps"> ←"slotProps"がスロットプロパティ（の名称）。
- 好きな命名でOK。
子の指定：<slot name="title" :name="name"> ←v-bindを使って、スロットプロパティを指定する。
子はVueインスタンスのフィールドを使用して、親のスロットプロパティが受け取るイメージ。

LastName.vue

<template>
  <div>
    <!-- デフォルトスロット表示用 -->
    <slot></slot>
    <hr>
    <!-- v-bindでスロットプロパティを定義 -->
    <slot name="name" :sei="sei" :mei="mei"></slot>
    <hr>
    <!-- slotタグのnameにテンプレート名を指定 -->
    <slot name="job" :syokugyou="syokugyou"></slot>
  </div>
</template>

<script>
export default {
  props: {
    job: {
      type: String,
      required: false
    }
  },
  data: function() {
    return {
      sei: "山田",
      mei: "太郎",
      syokugyou: this.job
    }
  }
}
</script>

App.vue

<template>
  <div>
    <FirstName :your-age="defaultAge" gender="男性" @my-click="emitData = $event"></FirstName>
    <LastName :job="job">
      <!--  スロットプロパティ「slotProps」を定義 -->
      <template v-slot:name="slotProps">
        <!-- このタグでのみ「slotProps」使用できる -->
        <p>私は{{slotProps.sei}}{{slotProps.mei}}です</p>
      </template>

      <!--  スロットプロパティ「hoge」を定義 -->
      <template v-slot:job="hoge">
        <!-- このタグでのみ「hoge」を 使用できる -->
        <p>職業は{{hoge.syokugyou}}です</p>
      </template>
    </LastName>
    <p>思っていた年齢{{defaultAge}}歳でしたが、{{emitData}}歳違っていたようでした。すみません。</p>
  </div>
</template>

<script>
import LastName from "./components/LastName.vue";

export default {
  data: function() {
    return {
      defaultAge: 15,
      emitData: 0,
      job: "家庭教師"
    }
  },
  components: {
    LastName: LastName
  }
}
</script>

結果

スロットプロパティ（デフォルトスロットのみ）

デフォルトスロットのみの場合、templateタグが不要（Vue.jsが勝手にtemplateタグを付与してくれる）。
その時のスロットプロパティは、単一コンポーネントに定義する。

LastName.vue

<template>
  <div>
    <!-- デフォルトスロット表示用 -->
    <slot :sei="sei" :mei="mei" :syokugyou="syokugyou"></slot>
  </div>
</template>

<script>
export default {
  props: {
    job: {
      type: String,
      required: false
    }
  },
  data: function() {
    return {
      sei: "山田",
      mei: "太郎",
      syokugyou: this.job
    }
  }
}
</script>

App.vue

<template>
  <div>
    <FirstName :your-age="defaultAge" gender="男性" @my-click="emitData = $event"></FirstName>

    <!-- デフォルトスロットのときのスロットプロパティの命名 -->
    <LastName :job="job" v-slot:default="slotProps">
    <!-- <LastName :job="job" v-slot="slotProps"> のようにdefalutは省略可-->

      <!-- templateがなくデフォルトスロットのみ -->
      <p>私は{{slotProps.sei}}：{{slotProps.mei}}です</p>
      <p>職業は{{slotProps.syokugyou}}です</p>
    </LastName>
    <p>思っていた年齢{{defaultAge}}歳でしたが、{{emitData}}歳違っていたようでした。すみません。</p>
  </div>
</template>

<script>
import LastName from "./components/LastName.vue";

export default {
  data: function() {
    return {
      defaultAge: 15,
      emitData: 0,
      job: "広告業界"
    }
  },
  components: {
    LastName: LastName
  }
}
</script>

結果

v-slotの省略記法

#に置き換えることができる

<template v-slot:job="hoge">
を
<template #job="hoge">
このように省略して書ける。

ただし、defaultスロットについては省略はNG。

8-8. コンポーネント間のデータの受け渡し（子→親:$emit）

子→親の場合、$emitを使います。
元々、$emitは、カスタムイベントを作る時に使用される。
任意のタイミングで$emitを実行することで、親のVueコンポーネント（今回はApp.vue）でイベントを発火させる。
その発火する時に、データを付け加えて戻すような仕組み。
重要：子は親のデータを変更することはできない。あくまでも子からデータを返している。

なお、カスタムイベントはJavaScript内では使われない。
よって（htmlは大文字小文字を区別しないので）、ケバブケースで命名するのが良い。

FirstName.vue

<template>
  <div>
    <p>こんにちは{{name}}さん</p>
    <button @click="changeMethod">押した分だけ年齢増えます</button>
    <p>年齢：{{age}}</p>
    <p>性別：{{gender}}</p>
  </div>
</template>

<script>
export default {
  props: {
    yourAge: {
      type: Number,
      required: true
    },
    gender: {
      type: String,
      required: true
    }
  },
  data: function() {
    return {
      name: "次郎",
      age: this.yourAge
    }
  },
  methods:{
    changeMethod: function() {
      this.age += 1

      // 子→親への値受け渡し。
      // $emitで値を返す。正確いうと、親のイベントを発火させて、引数で渡す。
      // 第１引数：イベント名（ケバブケースで指定する）、第２引数：イベントで渡す値（任意）
      // 元々 $emit はカスタムイベントを作る時に使用。
      this.$emit("my-click", this.age - this.yourAge)
    }
  },
}
</script>

<style scoped>
div {
  border: 1px blue solid;
}
</style>

App.vue

<template>
  <div>
    <!-- v-onディレクティブでイベントを受け取る -->
    <FirstName :your-age="defaultAge" gender="男性" @my-click="emitData = $event"></FirstName>
    <LastName></LastName>
    <p>思っていた年齢{{defaultAge}}歳でしたが、{{emitData}}歳違っていたようでした。すみません。</p>
  </div>
</template>

<script>
import LastName from "./components/LastName.vue";

export default {
  data: function() {
    return {
      defaultAge: 15,
      emitData: 0
    }
  },
  components: {
    LastName: LastName
  }
}
</script>

結果

8-8. コンポーネントの動的切り替え

同じ場所に表示するコンポーネントを切り替える時には、componentタグを使う。
以下、新たに ParentコンポーネントとChildコンポーネントを定義し、切り替える。

Parent.vue

<template>
  <div>
    <p>親の山田一郎です</p>
  </div>
</template>

Child.vue

<template>
  <div>
    <p>子供の山田一太郎です</p>
  </div>
</template>

App.vue

<template>
  <div>
    <!-- クリックでコンポーネントを切り替える操作 -->
    <button @click="changeComponent('Parent')">押したら親の名前が表示されます</button>
    <br>
    <button @click="changeComponent('Child')">押したら子供の名前が表示されます</button>
    <hr>

    <!-- compenentタグで動的にVueコンポーネントを切り替える -->
    <component :is='currentComponents'></component>
  </div>
</template>

<script>
import Parent from "./components/Parent.vue";
import Child from "./components/Child.vue";

export default {
  data: function() {
    return {
      currentComponents: "Parent"
    }
  },
  components: {
    Parent: Parent,
    Child: Child
  },
  methods:{
    changeComponent: function(compName) {
        this.currentComponents = compName
    }
  },
}
</script>

結果

切り替え時のキャッシュ

なお、切り替えの度にVueインスタンスがdestroyとcreateを繰り返している。
インスタンスが消えてしまうため、dataが毎回削除（＝初期化）されるということなので、注意が必要。

もしdestroyさせないためには（＝キャッシュさせるためには）、keep-aliveタグを使う。

App.vue

<!-- keep-aliveタグを使ってキャッシュ -->
<keep-alive>
  <component :is='currentComponents'></component>
</keep-alive>

ただし、こうすると従来のライフサイクルメソッドのdestroyed()が使えなくなる。
その代わりに、deactivated()とactivated()が使えるようになる。

deactivated()：該当コンポーネントが表示されなくなった時にコールされる
activated()：該当コンポーネントが表示された時にコールされる

Parent.vue

<template>
  <div>
    <p>親の山田一郎です</p>
  </div>
</template>

<script>
export default {
  // keep-alive用 
  deactivated() {
    console.log("deactivated：非表示になりました")
  },
  // keep-alive用
  activated() {
    console.log("activated：表示になりました")
  }
}
</script>

8-9. コンポーネントでのv-model（propsとemit）

親コンポーネントにてv-modelを指定して、子コンポーネントでその値を反映するやり方は、
propsと$emitをを両方使う。

typeによって、子コンポーネントのinputタグの書き方が異なる。

テキストボックス

App.vue

<template>
  <div>
    <!-- v-modelの指定 -->
    <LastName v-model="defaultMsg"></LastName>
  </div>
</template>

<script>
import LastName from "./components/LastName.vue";

export default {
  data: function() {
    return {
      defaultAge: 15,
      defaultMsg: 'デフォルトメッセージ'
    }
  },
  components: {
    LastName: LastName
  }
}
</script>

LastName.vue

<template>
  <div>
    <p>私は{{name}}です</p>

    <!-- valueにpropsの値を反映させ、 -->
    <!-- $emitにinputメソッドを指定して発火させて親コンポーネントに反映させる -->
    <input
      id="title"
      type="text"
      :value="value"
      @input="$emit('input', $event.target.value)"
    >
    <pre>{{ value }}</pre>
  </div>
</template>

<script>
export default {
  props: {
    // v-modelの受け口として、valueという変数名で、propsを指定する
    value: {
      type: String,
      required: true
    }
  },
  data: function() {
    return {
      name: "山田",
    }
  }
}
</script>

結果

チェックボックス

App.vue

<template>
  <div>
    <!-- v-modelの指定 -->
    <LastName v-model="defaultCheck"></LastName>
  </div>
</template>

<script>
import LastName from "./components/LastName.vue";

export default {
  data: function() {
    return {
      defaultAge: 15,
      defaultCheck: true
    }
  },
  components: {
    LastName: LastName
  }
}
</script>

LastName.vue

<template>
  <div>
    <p>私は{{name}}です</p>

    <!-- チェックボックスのchangeイベントを利用する -->
    <!-- $emitにchangeメソッドを指定して発火させて親コンポーネントに反映させる -->
    <input
      type="checkbox"
      :checked="childChecked"
      @change="childChecked=$event.target.checked"
    >
    <pre>{{ childChecked }}</pre>
  </div>
</template>

<script>
export default {
  props: {
    // valueという変数名で、propsを指定する
    // チェックは、boolean
    value: {
      type: Boolean,
      required: true
    }
  },
  data: function() {
    return {
      name: "山田",
      childChecked: this.value
    }
  }
}
</script>

結果