vue中的prop

学习vue有一段时间了，也写了一些东西。今天看文档突然看到了一个好玩的东西，那就是prop。prop的作用是父组件向子组件单向传递数据，这个过程是单向的。传递的属性可以是静态的，可以是动态的，可以是数字，可以是字符串，可以是数组，还可以是对象，甚至可以在传递数据的时候写一个校验函数进行校验。

传静态的属性

子组件：

父组件：

好了，这样就完成了一个最简单的使用prop接收父元素的值

传动态字符串

子组件

父组件

可以看到，子组件我未做任何修改，只是在父组件做了一些修改

传动态数组

子组件

父组件

传动态对象

子组件

父组件

对prop的状态进行验证

prop的状态可以为

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol
  下面进行演示
  子组件

父组件

自定义校验函数

props: {
  status: {
    validator: function (value) {
      // 这个值必须匹配下列字符串中的一个
      return ['success', 'warning', 'danger'].indexOf(value) !== -1
    }
  }
}

默认值

props: {
  num: {
    type: Number,
    default: 100
  },
}