Vue3の基本3（コンポーネント間のデータ受け渡し）

１．Vueの動作環境
２．プロジェクトの作成
３．親子間のコンポーネントのデータ受け渡し

（参考資料）
・Vue3 日本語ドキュメント
　https://v3.ja.vuejs.org/
・Vue.js3超入門（掌田津耶乃著）秀和システム

１．Vueの動作環境
（１）動作環境
　・Windows 10 Pro
　・XAMPP Control Panel v3.2.4　
　・Node.js v16.13.0

２．プロジェクトの作成
（１）Viteツールを使ったプロジェクトの作成
　> npm init vite-app sample-app
　> cd sample-app
　> npm install

（２）プロジェクトの実行
> npm run dev

　前編（Vue3の基本2）に続き、プロジェクトファイルを使ったVueアプリケーションの作成を行います。

３．親子間のコンポーネントのデータ受け渡し
（１）概要
　コンポーネント間のデータの受け渡しを通して、Vueの機能について確認します。

・コンポーネント内のHTML（テンプレート）にデータを表示するとき、テンプレートの外でデータを設定するときは、Vueに渡すオブジェクトのdata()メソッドに変数を記述する。
・コンポーネントを使う側で子コンポーネントのタグに属性としてデータを渡すときは、子コンポーネントのオブジェクトのpropsプロパティに変数を記述しておく。
さらにコンポーネントを使う側でタグに属性として渡すデータをテンプレートの外で設定するときは、テンプレート側の変数をオブジェクト側の変数にバインド「v-bind:（オブジェクト側の変数）=”（テンプレート側の変数）”」する必要がある。
・$emit()メソッドを使い、子コンポーネントから親コンポーネントにカスタムイベントと引数を通知することができる。
　親コンポーネント側ではv-on （カスタムイベント）でコンポーネント内のオブジェクトのメソッドを起動する。

（２）作成するアプリケーション
　text１、text2の表示は各々のコンポーネント内のVueオブジェクトで設定、親コンポーネント（App）は子コンポーネントを使い、その属性text3に”message”を設定し、子コンポーネント側で表示します。
　子コンポーネントで入力したテキストを「click」ボタンを押したイベント名とともに親コンポーネントに通知します。

（３）ソースリスト
　index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

　main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

import { createApp } from 'vue'

import App from './App.vue'

import './index.css'

createApp(App).mount('#app')

　App.vue

<template>
  <p>{{text1}}</p>
  <hello 
    v-bind:text3="message"
    v-on:c-event="appAction"
  />
  <p>{{text4}}</p>
</template>

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

export default {
  name: 'App',
  components: {
    hello
  },
  data(){
    return {
      text1:'親コンポーネントを表示します',
      message:'親側でtext2属性に設定したメッセージです',
      text4:'子コンポーネントで入力したテキストが入る場所'
    }
  },
  methods:{
    appAction(m_input){
      this.text4='子コンポーネントの入力:'+m_input
    },
  }    
}
</script>

<hello

v-bind:text3="message"

v-on:c-event="appAction"

</template>

import hello from './components/hello.vue'

export default {

name: 'App',

components: {

hello

data(){

return {

text1:'親コンポーネントを表示します',

message:'親側でtext2属性に設定したメッセージです',

text4:'子コンポーネントで入力したテキストが入る場所'

}

methods:{

appAction(m_input){

this.text4='子コンポーネントの入力:'+m_input

}

</script>

　hello.vue

<template>
  <p> {{text2}} </p>
  <p> {{text3}} </p>
  <input type=text v-model="input">
  <button v-on:click="bton">Click</button>
  <p>子コンポーネントのテンプレート・・ここまで</p>
</template>

<script>
export default {
  name: 'hello',
  props: ['text3'],
  data(){
    return{
      text2:'子コンポーネントのテンプレート・・はじまり',
      input:'テキストを入力してClickしてください！'
    }
  },
  methods:{
    bton(){
      this.$emit('c-event',this.input)  //親にイベントを通知し、入力フォームの値を引数で渡す
    }
  }
}
</script>

<button v-on:click="bton">Click</button>

<p>子コンポーネントのテンプレート・・ここまで</p>

</template>

export default {

name: 'hello',

props: ['text3'],

data(){

return{

text2:'子コンポーネントのテンプレート・・はじまり',

input:'テキストを入力してClickしてください！'

}

methods:{

bton(){

this.$emit('c-event',this.input) //親にイベントを通知し、入力フォームの値を引数で渡す

}

</script>

アプリケーションの起動
　> npm run dev

最初にアクセス、またはリロードしたとき

入力フォームからテキストを入力して「Click」したとき

The end