<環境構築なし>Vue.jsのコンポーネント間の値の受け渡しを解説

2023年10月3日 21:39

Vue.jsとは？

Vue.jsはEvan You氏によって開発されたオープンソースのJavaScriptのフレームワークで、今回はwebブラウザ上で動く便利なフレームワークなんだなぁ～という感じの認識で大丈夫です。

コンポーネントとは？

Vue.jsを使っている際に多く利用するのが、コンポーネントで「部品」というイメージを持つとわかりやすいです。コンポーネントを組み合わせて1つのwebページを作成します。また、コンポーネントは他のページに再利用でき、同じコードを何回も書かなくて済みます。

コンポーネントは大きく分けて２つ

複数のコンポーネントが集まって構成されるwebページでも、コンポーネントは大きく分けて２つで構成されています。親コンポーネントと子コンポーネントです。簡単に言えば親コンポーネントが「コンポーネントを利用する側」、子コンポーネントが「コンポーネントを利用される側」となり、親コンポーネントに対して、複数の子コンポーネントが集まっている感じです。
そして、今回は親と子の値の受け渡し方について説明していきますが、まず環境構築なしでVue.jsを扱える「CodeSandbox」について少し触れておきます。

CodeSandboxを使ってみよう

プログラミング言語を学習するときに面倒なのが環境構築ですよね…私も今でこそ少し慣れてきましたが、初めのころは面倒で挫折してしまった経験があります。
　そこでCodeSandboxを使えば面倒な環境構築をせずにVue.jsを学ぶことができます。今回はCodeSandboxを使って説明していきますので、環境構築が面倒な方はぜひ使ってみてください。

右上の「Try for free」をクリックしてください。

右上の検索フォームで「Vue」と入力し、赤枠の「Vue 3」を選択してください。

上の画面が表示されれば成功です。今回はログインなしで使用しているため右上に「0/3 sandboxes used」と表示されます。これは、使用回数に制限があるということです。これからも利用する方はアカウント作成をお勧めします。

①親コンポーネントから子コンポーネントへ値を渡す

まず、親コンポーネントから子コンポーネントへの値を渡す方法から説明します。今回は上記で述べた通りCodeSandboxを使用して進めていきます。

CodeSandboxを起動すると、上のようなファイル構成になっています。今回使用するのは「index.html」「HelloWorld.vue」「App.vue」のみです。ほかのファイルは気にせず、進めていきます。

//貼り付け用//
<link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/vue@next"></script>

index.htmlに赤枠の部分を上の画像のように編集してください。これは「bootstrap」（webフレームワーク）を使えるようにしています。見た目をよくするものだと思ってください。

App.vueを上記のように変更してください。
今回は値の渡す説明に制限するので細かいコードの説明は省きます。
App.vueが親コンポーネントになります。

<template>タグを見てみますと、HelloWorldコンポーネントの'title'に'message'がバインドされています。（'title'に'message'を代入している）
また、<button>タグにあるv-on:click="doAction"でクリックされたときに動作するメソッドが指定されています。では、doActionメソッドはどのような内容なのか見ていきます。

doActionメソッドではprompt（入力フォーム付きのダイアログ）で'new_title'に入力された値を入れています。そして、'new_title'を'this.message'（dataの中にあるmessage='こんにちは' のこと）に入れています。つまり、messageの値がnew_titleの値（'こんにちは'→入力された値）に変更され、templateタグのtitleにmessageで代入しています。

次にHelloWorld.vueを見ていきます。3行目の{{ title }}には初めは'こんにちは'と入っています。しかし、App.vueのdoActionメソッドによりココが入力された値に変更されます。
それでは、完成画面を見てみます。

「こんにちは」が「おはようございます」に変わったのがわかりますね。
親コンポーネントのメソッドで取得した値を子コンポーネントの変数に代入しています。
ちなみに、「お名前は？」の下のフォームに値を入力すると表示が変更されるので試しにやってみてください。この変更は、HelloWorldコンポーネントの中だけで値を変更しています。

②子コンポーネントから親コンポーネントへ値を渡す

次に、子コンポーネントから親コンポーネントに値を渡していきますが、少しだけ複雑です。
ファイル構造は先ほどと同じなので、説明は省きます。また、使うファイルも先ほど同じで「index.html」「HelloWorld.vue」「App.vue」です。そして、「index.html」のファイルの内容も同じなので上の画面を参照してください。
それでは、コードを見ていきます。

今回はHelloWorld.vueから見ています。
先ほどとあまり変わりませんが、一つだけ見慣れないメソッドがあります。

doActionメソッドの中にある、$emitメソッドです。

this.$emit(イベント , 引数の値  …)

$emitは上記のような構成になっており、イベントとは、親コンポーネントにある子コンポーネントタグと紐づけるためのもので、つまりコード内でいえば、'result-event'を親コンポーネントに送っています。同時に'引数の値'も送ります。少し複雑なので、コードを見てみます。

App.vueの<HelloWorld>タグ（子コンポーネントタグ）に'result-event'がありますね。そして、その隣にApp.vueのメソッドであるappActionがあります。これで子コンポーネントのイベントと親コンポーネントのメソッドを紐づけており、App.vueのappActionメソッドが動いています。
イベントと同時に引数の値もApp.vueに送っており<HelloWorld>タグの'message'に代入されています。結果、子コンポーネントから受け取った値を'message'に代入し、それをappActionメソッドで'this.input_name'に代入しています。
それでは、完成画面を見てみましょう。

HelloWorld.vueの入力フォームで取得した'name'をApp.vueのdoActionメソッドで表示していますね。
以上、コンポーネント間の値の受け渡しでした。

この記事が気に入ったらサポートをしてみませんか？