标签：vue 验证 Part.22 prop props 组件 message Prop
本公众号 的系列文章《跟热饭一起学习vue吧》，本文会采用非常土，非常low的语言，让读者学习并立即上手即可使用vue去写前端页面。简单生动，由浅入深。那么，就一起开始学习吧，体验一把又土又油腻的教程吧~
别忘了先打开我们的菜鸟编辑器当做草纸吧：右键左下角“阅读原文”在新窗口中打开链接，会打开在线编辑器。
Prop
让我们先来看下菜鸟教程的官方定义：
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”
然后我们再来思考下，这段话的含义，可以明确以下几点：
-
prop是一个属性
-
prop是用来传递数据的，应该相当于一个媒介
那么，这里就引出来几个问题：
- props在哪写？
答：在组件里写，当做一个属性，和上节课学的template同级。
- props怎么用？
答：值可以是一个列表，里面存放一些变量名。
- props里的变量的值从哪来？到哪去？
答：从调用它的dom层里来，到组成实际的template属性里去。
例子如下：
动态prop
提到动态，其实就是简单的用v-bind去绑定而已。然后本来的变量内容，我们上个例子是写死的一个字符串，现在换成了一个变量。
看下面这个例子，其中换成了一个变量。
那么就有人问了，换成了变量有啥用呢？为什么要写的这么麻烦？
其实，这样我们就可以实现简单的一个场景，比如上面写个输入框，用v-model指令绑定变量parentMsg,就可以实现 我写什么，这个child组件就显示什么的效果 了：
如上图所示，即是动态prop属性的一种情况的运用了。
在vue的循环中，使用组件
vue的循环，大家一定还有印象，就是在要循环的标签元素内，写一个指令叫v-for
那么我们能不能让组件循环起来呢？当然可以！
如上图，就是给这个组件循环展示了三次。循环体的sites实际上是个列表，这个列表三个元素，都是字典。但是很可惜，字典的内容并没有起到什么作用。
那么我们接下来就想，能不能子元素字典里的内容起作用，显示到页面上呢？
这就需要把整个数据进行一次打通。那我们就要思考目前的这个具体的数据，已经传到哪了？
很显然，已经到了item这里了。
每个item 都是一个元素，也就是那个字典之一：
所以，结合我们之前学的利用props来传递给组件参数，那么就改成了这样：
这里要额外提一下，props的传输是单向的，反过来是不行的。
Prop验证
看这个新的知识点，验证？估计很多小伙伴看到这个词都不明白，prop验证是什么东西，干嘛用的。别着急，我们慢慢往下看。
我们之前学习使用props作为组件属性的时候，它的值都是一个列表，列表内放上我们要传的变量名。
现在要学习的验证，其实就是验证这些变量，是否符合我们指定的规矩。
比如，我要传入一个参数，叫 message,我们之前可以这么写：
prps:['message']
现在我有个需求，要验证这个message的类型必须是整数，如果类型不对，你打开console控制台就会看到一个vue警告（必须是开发版本vue才有警告）。那么这个要怎么实现呢？写成如下即可：
props: {message: Number}
那么多个变量还有其他各种验证法要怎么写呢？
菜鸟教程给出了很好的统计：
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
其中的type 可以是下面的任何一个。
好了本节课就到这里，怎么样，是不是感觉很简单？？？感觉简单的话，就立马关注下本公众号吧~ 进群学习请加v：qingwanjianhua
标签：vue,验证,Part.22,prop,props,组件,message,Prop 来源： https://blog.csdn.net/qq_22795513/article/details/120092228
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。