当前位置：首页 > news >正文

组件传递props校验

news 来源：原创 2025/5/12 0:29:30

注意：prop是只读的！不可以修改父组件的数据。

可以检验传过来的内容是否类型没问题。

App.vue

<template>
    <div>
        <!-- <parentDemo/> -->
         <componentA/>
    </div>

</template>
<script>
import ComponentA from './components/componentA.vue';

// import parentDemo from './components/parentDemo.vue';
export default{
    components:{
        // parentDemo
        ComponentA
    }
}
</script>
<style>

</style>

A.vue

<template>
    <div>
        <h3>componentA</h3>
        <componentB :title="titles" />//不传name
    </div>
</template>
<script>
import ComponentB from './componentB.vue';


export default{
    data(){
        return{
            titles:'sss',
            names:['小明','画画']
        }
    },
    components:{
        ComponentB
    }
}
</script>

B.vue

<template>
    <div>
        <h3>componentB</h3>
        <p>{{ title }}</p>
        <!-- A组件没有传age的值 -->
        <p>{{ age }}</p>
        <p v-for="(iteam,index) of names " :key='index'>{{ iteam }}</p>
    </div>
    
</template>
<script>
export default{
    data(){
        return{
            
        }
    },
    props:{
        title:{
            // 接受多种类型
            type:[Number,String,Array,Object],
            // 必选项,若不传则报警告。
            required:true
        },
        age:{
            // 没传age的值
            type:Number,
            // 没传显示默认值为0，传了就显示传的值
            default:0
        },
        // 数字和字符串可以直接default,但是如果是数组和对象，必须通过函数返回函数默认值
        names:{
            type:Array,
            // 数组默认返回函数
            default(){
                return["空"]
            }
        }
    }
}
</script>