vue_父组件传送数据参数校验 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3>组件参数校验</h3>
    <child :content="msg" :parms="'parms-one'"></child>
  </div>
</body>
<script type="text/javascript">
  // props特性 要求父组件传，子组件接，子组件可以用传送过来的数据，渲染dom节点也不会显示特性
  // 非props特性，父组件传，子组件不接，子组件无法使用数据，报错，渲染dom节点也会显示特性
  Vue.component('child', {
    // 子组件用props接收, 参数校验
    // props: ['content'],
    props: {
      //表示传送的数据必须为数字或者字符串
      content: [Number, String],
      parms: {
        //表示传送的数据必须为字符串
        type: String,
        //true表示必须传送参数，false相反
        required: true,
        //没有传值的时候默认值
        default: 'default value',
        // 自定义检验方法，传入的数据长度必须大于5
        validator: value => {return value.length>5}
      }
    },
    template: '<div>{{content}}</div>'
  })
  let vm = new Vue({
    el: '#app',
    data: {
      msg: 'hello jack'
    }
  })
</script>
</html>

 

posted @ 2020-03-05 15:53  前端之旅  阅读(397)  评论(0)    收藏  举报