記事内に商品プロモーションを含む場合があります
上記の疑問の解決記事です。
本記事は、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プロパティに、定義した処理を記述
親コンポーネント側の書き方
通常のイベント処理を定義する
<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】子から親へのデータ受け渡し$emitの使い方【SFC未使用】」について以下のことを解説しました。
どっちが「親」？どっちが「子」？
コードの全体像
$emitが動作する書き方
概念が複雑になってくるので、ぜひ手元のエディターに書いて、実際の挙動を確かめてみてください。
