Vue.js

【Vue.js】子から親へのデータ受け渡し$emitの使い方【SFC未使用】

生徒さん
生徒さん
Vue.jsの$emitってどう使えばいいのかな・・・

上記の疑問の解決記事です。

本記事は、SFC(単一ファイルコンポーネント = .vueファイル)ではない場合の「$emitの使い方」を解説しています。

本記事のコードを実装すると、以下のようなことが可能になります。

子コンポーネントのイベントを親コンポーネントで実行する

 

 

以前の記事では、「親から子」へデータを受け渡すpropsについて解説しました。

そこで今回は、その逆にあたる、「子から親」へ受け渡す$emitについて解説していきます。

 

コードの全体像

今回使用するコードはこちらです(コピペでOK)。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Vue.js APP</title>
    <style>
        .btn {
            width: 100px;
            border: 1px solid #999;
            border-radius: 4px;
        }
        .btn a {
            text-decoration: none;
            display: block;
            text-align: center;
            padding: 2px;
            color: #000;
        }
    </style>
</head>
<body>
    <div id="app">
        <child-component v-on:child-click="parentClick"></child-component>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script>
        Vue.component('child-component', {
            template: '<div class="btn"><a href="#" v-on:click="clickEvent">ボタン</a></div>',
            methods: {
                clickEvent() {
                    this.$emit('child-click')
                }
            }
        })

        let app = new Vue({
            el: '#app',
            methods: {
                parentClick() {
                    alert('子側からのクリックだよ')
                }
            }
        })
    </script>
</body>
</html>

 

見た目は下記のようになります。

ボタンクリックで、子コンポーネント側でディレクティブ指定しているv-on:clickが呼び出される

 

 

$emitが動作する書き方

Script側、HTML側の書き方は以下の通りです。

 

Script側

まずはScriptの子側・親側。

 

子コンポーネント側の書き方

methodsでイベント名を定義
定義したイベント内に$emitでカスタムイベントを親側にevent-upする
templateプロパティに、定義した処理を記述

ゆう
ゆう
「event-up」とは、「props-down」の反対語で、「子から親へのデータの流れ」を意味するよ

 

親コンポーネント側の書き方

通常のイベント処理を定義する

<script>
    // 子コンポーネント
    Vue.component('child-component', {
        template: '<div class="btn"><a href="#" v-on:click="clickEvent">ボタン</a></div>',
        methods: {
            clickEvent() {
                this.$emit('child-click')
            }
        }
    })

    // 親コンポーネント
    let app = new Vue({
        el: '#app',
        methods: {
            parentClick() {
                alert('子側からのクリックだよ')
            }
        }
    })
</script>

 

 

 

HTML側

続いてHTML側での記述です。

カスタムイベントを定義する
v-on:clickではなく、v-on:childs-click=”親コンポーネントで定義のメソッド“)

<!-- 親コンポーネント -->
<div id="app">
	<!-- 子コンポーネント -->
	<child-component v-on:child-click="parentClick"></child-component>
</div>

 

これでevent-up(子から親へのデータ渡し)が可能になります。

 

ちなみに今回は「子から親」へのデータ受け渡しを解説しましたが、「親から子」への受け渡しは下記記事で解説しています。参考までに。

【Vue.js】コンポーネントの書き方【SFC未使用】 上記のような疑問に答える記事です。 Vue.jsのコンポーネントの書き方には複数のルールがあります。ルールに従って...

 

 

まとめ

本記事では、「【Vue.js】子から親へのデータ受け渡し$emitの使い方【SFC未使用】」について以下のことを解説しました。

コードの全体像
$emitが動作する書き方

概念が複雑になってくるので、ぜひ手元のエディターに書いて、実際の挙動を確かめてみてください。

ABOUT ME
ゆう
エンジニア歴6年。 大学卒業後、フィールドエンジニア職に就くが手に職をつけたいと思い、ゼロスキルからWEBデザイナーに転職。 その後WEB制作会社、東証プライム市場企業のECサイト運用担当を経て、現在は自社開発企業のWEBコーダーとして仕事に従事。分かりやすく伝えることに課題意識を持ってます。