Vue中的属性验证

最新推荐文章于 2024-06-03 09:15:36 发布

于思杨

最新推荐文章于 2024-06-03 09:15:36 发布

阅读量1.2k

点赞数 1

文章标签： vue javascript

本文链接：https://blog.csdn.net/huhu_nihao/article/details/93786019

版权

Vue中的属性验证

一、为什么要有props验证？

当一个开发人员要使用component组件的时候，他可能会对其要接受的参数有什么要求不是很清楚，因此传入的参数可能会在开发子组件的人的意料之外，程序就会发生错误，就像我们在函数调用之前先检查一下函数一样，props也可以进行一个预先检查

二、使用props验证：

在组件通信时，作为接收值的容器（数组，当这个值要进行属性验证时要写成对象形式）

props: [ ‘msg’ ] 没有进行验证，知识单纯的接收了一个父组件传递来的数据
props: { attr: attrType } 进行普通属性验证
props: { type: typeType, default: value } 这里的default是为这个属性设置初始值
props: { validator ( val ) { return boolean }} 可以进行一个条件的比较

注意：除了以上形式的属性验证以外，还有第三方封装的类库 vue-validate vee-validate（因为vue未使用typescript验证而产生） …

<body>
  <div id="app">
    <Father></Father>
  </div>

  <template id="father">
    <div>
      <h3> 这里是父组件 </h3>
      <Son :money = "money" :n = "n"></Son>
    </div>
  </template>
  <template id="son">
    <div>
      <h3> 这里是子组件 </h3>
      <p> 父亲给了我  {{ money + 100}}  钱  </p>
      <p> num: {{ num }} </p>
    </div>
  </template>

</body>

<script>
  /* 
    父子组件通信会使用到 props 
  */

  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        money: 1000,
        n: 400
      }
    }
  })

  Vue.component('Son',{
    template: '#son',
    props: {
      // key: value   key就是我们接收的属性    value就是我们想要的这个属性的数据类型
      'money': Number, // String   Boolean       Object...
      'n': {
        validator ( val ) { //属性验证函数，一般常用于条件的比较
          // val 就是我们得到的数据
          return  val > 300 //返回值是一个布尔值
        }
      },
      'num': {
        type: Number,
        default:200
      }
    }
  })

  new Vue({
    el: '#app'
  })
</script>

于思杨

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的属性验证

Vue中的属性验证一、为什么要有props验证？当一个开发人员要使用component组件的时候，他可能会对其要接受的参数有什么要求不是很清楚，因此传入的参数可能会在开发子组件的人的意料之外，程序就会发生错误，就像我们在函数调用之前先检查一下函数一样，props也可以进行一个预先检查二、使用props验证：在组件通信时，作为接收值的容器（数组，当这个值要进行属性验证时要写成对象形式）p...
复制链接

扫一扫