Edited at

Vueのテンプレート中でspreadしてpropsを渡すにはどうすればいいか


はじめに

よくたくさんの項目をpropsをとして渡さなければいけないときがあります。

今までReactを使っていたときは「...」で良かったですが、Vueだとテンプレート中でspread operatorを使えません。

そこでどうやるかのメモ。


spreadとは

以下Javascript/MDNからコード引用

オブジェクトを分割して変数に入れることができます。

var obj1 = { foo: 'bar', x: 42 };

var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }


悪い例

以下は最初にやりがち。よくやる悪い例。自分もspreadを知らないときはこう書いていました。

<template>

...
<Form
:firstname="firstname"
:lastname="lastname"
:birthday="birthday"
:phonenumber="phonenumber"
/>
...
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import IUser from "@/Models/User";
import Form from "@/components/Organisms/Form.vue"

@Component({
name: "UserForm",
component: { Form }
})
export default class UserForm extends Vue {
@Props() private user: IUser;
}
</script>


良い例

これでオブジェクトをspreadで分けてpropsとして渡すことができる。

<template>

<Form v-bind="user"/>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import IUser from "@/Models/User";
import Form from "@/components/Organisms/Form.vue"

@Component({
name: "UserForm",
component: { Form }
})
export default class UserForm extends Vue {
@Props() private user: IUser;
}
</script>

spreadして渡すにはv-bindを使用します。

これでコードがスッキリしました。

ちゃんと分割してからPropsとして渡すことができます。


まとめ

spreadを活用してPropsへ分割してから渡すようにすることでコーディングの時間を減らしていきましょう