组件传递多种数据类型

通过 props 传递数据，不仅可以传递字符串类型的数据，还可以是其他类型，例如：数字、对象、数组等

但实际上任何类型的值都可以作为 props 的值被传递

Number

xxxxxxxxxx
<template>
    <h3>ComponentA</h3>
    <ComponentB :age="age"/>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
    data(){
        return{
            age:20
        }
    },
    components:{
        ComponentB
    }
}
</script>

xxxxxxxxxx
<template>
    <h3>ComponentB</h3>
    <p>{{ age }}</p>
</template>
<script>
export default {
    props:["age"]
}
</script>

Array

xxxxxxxxxx
<template>
    <h3>ComponentA</h3>
    <ComponentB :names="names"/>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
    data(){
        return{
            names:["iwen","ime","frank"]
        }
    },
    components:{
        ComponentB
    }
}
</script>

xxxxxxxxxx
<template>
    <h3>ComponentB</h3>
    <p v-for="(item,index) of names" :key="index">{{ item }}</p>
</template>
<script>
export default {
    props:["names"]
}
</script>

Object

xxxxxxxxxx
<template>
    <h3>ComponentA</h3>
    <ComponentB :userInfo="userInfo"/>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
    data(){
        return{
            userInfo:{
                name:"iwen",
                age:20
            }
        }
    },
    components:{
        ComponentB
    }
}
</script>

xxxxxxxxxx
<template>
    <h3>ComponentB</h3>
    <p>{{ userInfo.name }}</p>
    <p>{{ userInfo.age }}</p>
</template>
<script>
export default {
    props:["userInfo"]
}
</script>

实时效果反馈

1. props 能接受的数据类型是：

A 只能接受字符串类型

B 只能接受数组类型

C 只能接受对象类型

D 任何类型

答案

1=>D