前端流行框架Vue3教程：14. 组件传递Props效验

(4) 组件传递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添加个事件，是不允许修改父元素传递过来的数据