どーも、ぐるたか@guru_takaです。
Vueのpropsとemitを完全に理解すべく、簡単なサンプルを作ってみました。イメージはこんな感じ！
親から子にmsgを渡して、表示。子のボタンをクリックすると、親要素がカウントアップされる仕様になってます。
さっそく簡単にまとめていきます！
ソース
まずはsrcフォルダ構成とソースの紹介です。
└── src
├── App.vue
├── assets
│ └── logo.png
├── components
│ └── ParentMsg.vue
└── main.js
<template>
<div id="app">
<p>{{count}} 回、子供のボタンが押されました</p>
<ParentMsg msg="Hello World" @ChildBtnClick="increment" />
</div>
</template>
<script>
import ParentMsg from './components/ParentMsg.vue'
export default {
name: 'app',
data () {
return {
count: 0
}
},
components: {
ParentMsg
},
methods: {
increment () {
this.count++
}
},
}
</script>
<template>
<div>
<h1>親から渡されたMSGは"{{ this.msg }}"です</h1>
<button @click="CountUp">カウントアップ</button>
</div>
</template>
<script>
export default {
name: 'ParentMsg',
props: {
msg: String
},
methods: {
CountUp () {
this.$emit("ChildBtnClick");
}
},
}
</script>処理の概要はこんな感じ！
- 親から
msgを子コンポーネントに渡して表示 - 親が子コンポーネントのボタンクリックを監視
- 子コンポーネントのボタンがクリックされると、数字が+1される
propsについて
propsを簡単にまとめると、親から子にパラメーターを渡せるようになります。
サンプルでpropsに関係しているコードを抜粋したものがこちら！
export default {
name: 'ParentMsg',
props: {
msg: String
},
}
<template>
<div id="app">
<ParentMsg msg="Hello World" @ChildBtnClick="increment" />
</div>
</template>
props: { msg: String },で、パラメーターの受け皿を用意。親はmsg="Hello World"のように、データを渡せばOKです！
今回は基本的な型をStringと指定しただけですが、他にも色々あります。
propA: Number,
// 複数の型の許容
propB: [String, Number],// 文字列型を必須で要求する
propC: {
type: String,
required: true
},// デフォルト値つきの数値型
propD: {
type: Number,
default: 100
},
引用：プロパティ | 公式
こんな感じで、デフォルト設定(default)や型必須(required)もできます。用途に合わせて、お使いください！
emitについて
emitを簡単にまとめると、親が子のイベントを監視したり、子のデータを使ったりできます。
子コンポーネントでemitの重要な部分はこちら！
<template>
<div>
<button @click="CountUp">カウントアップ</button>
</div>
</template>
...
methods: {
CountUp () {
this.$emit("ChildBtnClick");
}
},
...
そして親側で重要な部分は、以下のようになります。
<template>
<div id="app">
<p>{{count}} 回、子供のボタンが押されました</p>
<ParentMsg @ChildBtnClick="increment" />
</div>
</template>
...
export default {
name: 'app',
data () {
return {
count: 0
}
},
...
methods: {
increment () {
this.count++
}
},
...
こんな流れで処理されます。
- ボタンをクリック→CountUp関数が発火
ChildBtnClickという名で親は子のイベント監視ChildBtnClickが発火(子のボタンがクリック)→increment関数が発火
子コンポーネントのデータを親にパスしたい時は、this.$emit("ChildBtnClick", { num: 100 });のように、emit の第2引数以降に値を渡していきましょう！
続いて、親側で子コンポーネントのデータを使う際は、以下のように第1引数が入ること前提でメソッドを定義しましょう。
methods: {
increment (el) {
this.count += el.num
}
},
後は子コンポーネントのデータを好きなようにすればOKです。
ここでの例だと、子コンポーネントからクリックする度に、100ずつカウントアップする処理になってます！
コメントを残す