Props 的傳遞

在Vue當中Props的傳遞是家常便飯，例如以下的資料若要傳遞至Child component時：

const age: number = 134;
const year number = 2153;
const today: Date = new Date();

需要在Parent component及Child component中如此地寫道：

// Parent component
<template>
...
<MyAwesomeComponent :age="age" :year='year' :date='today' />
...
</template>

// Child component
<template>
    <span>{{ age }}</span>
    <span>{{ year }}</span>
    <span>{{ date }}</span>
</template>
<script lang="ts">
    export default defineComponent({
        props: [age, year, date],
        setup(props){
           const { age, year, date } = toRefs(props);

           return { age, year, date };
        }
    });
</script>

如果不想這麼麻煩的Props傳入，想要把Prop一次打包傳入的話，就可以用下面的方法來操作。

Prop打包傳入

// Parent component
<template>
...
<MyAwesomeComponent v-bind="groupedProps" />
...
</template>

<script lang="ts">
    export interface IgroupedProps {
        age: number;
        year: number;
        today: Date;
    }
    export default defineComponent({
        setup(){
           const groupedProps = {age:134, year:2153, today: new Date()};

           return { groupedProps };
        }
    });
</script>

// Child component
<template>
    <span>{{ groupedProps.age }}</span>
    <span>{{ newage }}</span>
    <span>{{ groupedProps.year }}</span>
    <span>{{ groupedProps.today }}</span>
</template>

<script lang="ts">
    import { IgroupedProps } from 'Parent component'

    export default defineComponent({
        props: {
            groupedProps: { type: Object as PropType<IgroupedProps> },
        },
        setup(props){
           // 若要在setup內進行操作，則可使用解構方式取值
           // 若只需要直接在template內顯示，或進行簡單操作，則可直接使用props
           const { age, year, today } = toRefs(props);
           const newage =  age + 1;

           return { age, newage, year, today };
        }
    });
</script>