親子コンポーネント間の受け渡し
コンポーネントを渡す流れが分からない、、
props?$emit?他のファイルに値を渡す作業って難しい。
どうやらpropsと$emitという概念があるらしい。
文献を参考にして頭に入った感を味わうために今日もVueの学習を進めていく。
props
配列でdataのプロパティを渡す
親⇨子にコンポーネントを渡すときはpropsを使う。
紛らわしいのが、親⇨子という流れなのに、コンポーネントをインポートしているのは親だということ。日本語的に、コンポーネントを「渡される」対象が子なら、子がインポートするのが普通なのではと思う。
#src/components/Child.vue
<template>
<div>
<p>{{ statement }}</p>
</div>
</template>
<script>
export default {
props: {
statement: {
type: String,
default: 'hogehoge'
}
}
#propsの名前と型を子コンポーネント内で定義している。
}
</script>
補足:
propsの名前と型を子コンポーネント内で定義している。
#src/pages/App.vue
<template>
<div>
<h1>Hello from App.vue</h1>
<Child statement='choose to go to the moon.'/>
#ChildのgreetをHello with propsという値に上書きしている。
</div>
</template>
<script>
import Child from './components/Child.vue'
#子コンポーネントを親コンポーネントがインポートしている。
export default {
components: {
Child
#childにコンポーネントを渡している。
}
}
</script>
補足:
ChildのgreetをHello with propsという値に上書きしている。
ポイント
$emit
子⇨親にコンポーネントを渡している。
src/components/Child.vue
<template>
<div>
<p>subordinate_num: {{ subordinate_num }}</p>
<button @click='send'>君主に値を渡す</button>
</div>
</template>
<script>
export default {
data() {
return {
subordinate_num: 0
};
},
methods: {
send() {
this.$emit("my-click", this.subordinate_num);
#親コンポーネントでは、子で定義していたsend()アクションをmy-clickという名前で実行できる。
}
}
};
</script>
補足:
this.$emit("my-click", this.subordinate_num);
とすることで、親コンポーネントでは、子で定義していたsend()アクションをmy-clickという名前で実行できる。
#src/pages/App.vue
# パターン1:受け取った値をそのまま使う場合は$eventで受け取る
<template>
<div>
<h1>Hello from App.vue</h1>
<p>lord_num: {{ lord_num }}</p>
<Child @my-click='lord_num = $event'/>
#受け取った値を@に続いた形で記述。
#バインドさせた値 = $eventと書くことで、そのまま使用できる。
</div>
</template>
<script>
import Child from './components/Child.vue'
export default {
data() {
return {
lord_num: 100
}
},
components: {
Child
}
}
</script>
補足:
受け取った値を@に続いた形で記述。 バインドさせた値 = $eventと書くことで、そのまま使用できる。
src/App.vue
# パターン2. 受け取った値を関数で使う場合は、適当な変数(value)を定義するとそこに値が入る
<template>
<div>
<h1>Hello from App.vue</h1>
<p>lord_num: {{ lord_num }}</p>
<Child @my-click='citedNum'/>
</div>
</template>
<script>
import Child from './components/Child.vue'
export default {
data() {
return {
lord_num: 100
}
},
components: {
Child
},
methods: {
citedNum(value) {
this.lord_num = value
}
}
}
</script>
ポイント
- 子コンポーネント内で、
$emitでカスタムイベント(clickとかchange的な使われ方をするやつ)を作る- 第２引数に送信するデータを渡す
- 親コンポーネント内で子コンポーネントを呼び出す時に、作成したカスタムイベントを付与する
$eventや引数で送信されたデータを受け取る
