阅读 32

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

Prop

让我们先来看下菜鸟教程的官方定义:

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop"

然后我们再来思考下,这段话的含义,可以明确以下几点:

  1. prop是一个属性

  2. prop是用来传递数据的,应该相当于一个媒介

那么,这里就引出来几个问题:

  1. props在哪写?

答:在组件里写,当做一个属性,和上节课学的template同级。

  1. props怎么用?

答:值可以是一个列表,里面存放一些变量名。

  1. 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

本文使用 文章同步助手 同步

文章分类
代码人生
文章标签