组件传递Props效验

Vue组件可以更细致地声明对传入的props的校验要求

ComponentA.vue

<script>
import ComponentB from './ComponentB.vue';
export default {
    components: {
        ComponentB
    },
    data() {
        return {
            title: '标题'

        }
    }
}
</script>
<template>
    <h3>ComponentA </h3>
    <ComponentB :title="title"/>
</template>

ComponentB.vue

<script>
export default{
    data(){
        return{
            
        }
    },
    props:{
        title:{
            // 效验类型，可以为很多类型
            type:[String,Number]

        }
    }
}
</script>
<template>
<h3>ComponentB</h3>
<p>{{ title }}</p>
</template>

默认值

假设ComponentA.vue没有传入age的值：

ComponentB.vue

<script>
export default{
    data(){
        return{
            
        }
    },
    props:{
        title:{
            type:[String,Number],

        },
        age:{
            type:Number,
            default:18

        },
        // 数字和字符串可以直接default，但是如果是数组和对象，必须通过工厂函数返回默认值
        names:{
            type:Array,
            default(){
                return ['张三','李四']
            }
        }

    }
}
</script>
<template>
<h3>ComponentB</h3>
<p>{{ title }}</p>
<p>{{ age }}</p>
<ul>
    <li v-for="(item,index) in names" :key="index">{{ item }}</li>
</ul>
</template>

必选项

部分代码:

text:{
            type:String,
            required:true  // 必选项
        }

我们没有传text的话，就会有个提示

温馨提示
警告！prop是只读的!

比如我们用button添加个事件，是不允许修改父元素传递过来的数据