《跟热饭一起学习vue吧》Part.22 组件带参数 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相关推荐

vue 返回上一页带参数
返回上一页用的是 this.$router.go(-1) 那么只能在返回之前将参数放在localStorage里面 localStorage.setItem('searchKeyword', this ...
React学习笔记(五)之父子组件传递参数
父传子通过属性,父组件向子组件传递参数. this.state.list.map((item,index)=>{<todoItem content={item} /> } 子组件通 ...
vue window.open跳转带参数
在需要跳转的页面里面写方法,点击该方法就执行 let routeData = this.$router.resolve({ path: '/qrCode', query: { data: JSON.s ...
vue 回车查询按钮_从零开始学习vue
在github搜小程序我们可以看到许多用许多用vue开发的实例. 到底什么是vue,我们不妨浪费一天时间来了解一下. 一.什么是vue Vue是一个JavaScript框架.作者是国内常年混迹知乎的一 ...
vue.js 天气插件_天气检查我的项目以学习Vue.js
vue.js 天气插件天气 (vue-weather) Weather checking me project for learning Vue.js. 天气检查我的项目以学习Vue.js. Vie ...
手牵手学习vue之从0到1搭建项目
背景作为一个三年左右的程序员,时常是焦虑的,总是感觉会的不多,想着后面的路到底怎么走?要不要继续接着往下走!质疑的声音就慢慢出现在自己的耳边,但是我不能放弃,走到今天挺不容易的,面对自己对自己的质疑 ...
居然有老板禁止员工热饭：要么吃冷的，要么找人送...
贰贰网络,这家公司是不是没听过吧?但最近微博上突然火了,并不是它做了啥牛逼的东西,而是一则奇葩的微博爆料: 据传有内部员工爆料,公司老板要求行政部门将微波炉扔掉,禁止员工在公司热饭. 从聊天群里,可以 ...
eclipsevue代码怎么运行_[Java教程]使用eclipse初步学习vue.js操作
[Java教程]使用eclipse初步学习vue.js操作 0 2017-11-26 19:00:06 一.vue.js的初步认识 https://unpkg.com/vue ">vu ...
vue filter对象_学习vue源码（3）手写Vue.directive、Vue.filter、Vue.component方法
一.Vue.directive Vue.directive(id,[definition]); 1)参数 { string } id{ Function | Object } [ definition ...

《跟热饭一起学习vue吧》Part.22 组件带参数 Prop

《跟热饭一起学习vue吧》Part.22 组件带参数 Prop相关推荐

最新文章

热门文章