Vue(Nuxt.js) で親子コンポーネント間でdataを受け渡す方法です。
親コンポーネントから子コンポーネントにdataを渡す方法
↓親コンポーネント↓
Parent.vue
<template>
<div class="parent">
<Childe :user="user" />
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Childe from '~/components/Childe.vue'
export default Vue.extend({
components: {
Childe
},
data() {
return {
user: {
name: 'Taro',
age: 20,
comment: 'Hello'
}
}
}
})
</script>
↓子コンポーネント↓
Childe.vue
<template>
<div class="child">
{{ user.name }} <!--Taro-->
{{ user.age }} <!--20-->
{{ user.comment }} <!--Hello-->
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
props: ['user']
})
</script>
親コンポーネントは<Childe :user="user" />で子コンポーネントにdataを受け渡しています。
子コンポーネントは props: ['user'] で受け取ります。
{{ user.name }}{{ user.age }}{{ user.comment }}で受け取ったdataを表示可能です。
複数のdataを受け取る場合はprops: ['user', 'user2', 'user3'] のように配列に追加することできます。
propsは型を定義して受け取ることも可能
Childe.vue
<script lang="ts">
export default Vue.extend({
props: {
user: {
type: Object,
required: true,
default: {}
}
}
})
</script>
上記の方が明示的です。
子コンポーネントから親コンポーネントにdataを渡す方法
Childe.vue
<template>
<div class="child"></div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
data() {
return {
user: {
name: 'Taro',
age: 20,
comment: 'Hello'
}
}
},
mounted() {
this.$emit('childe-data', this.user)
}
})
</script>
Parent.vue
<template>
<div class="parent">
<Childe @childe-data="childeData($event, user)" />
{{ user.name }}
{{ user.age }}
{{ user.comment }}
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Childe from '~/components/Childe.vue'
export default Vue.extend({
components: {
Childe
},
data() {
return {
user: {}
}
},
methods: {
childeData(user: {}) {
this.user = user
}
}
})
</script>
子コンポーネントはthis.$emit('childe-data', this.user) を用いて、親コンポーネントにイベントとdataの値を引数として渡しています。
親コンポーネント<Childe @childe-data="childeData($event, user)" />で受け取り、this.user = userで自らのdataに代入しています。
$emitやイベント（メソッド）の受け渡しについては下記の記事でまとめています。
Vue(Nuxt.js) で親子コンポーネント間でイベント（メソッド）を呼び出す方法