vue组件参数校验

时间 2019-11-17

标签 vue 组件参数校验繁體版

原文原文链接

代码：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件传值</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
     <div id="root">
         <child content="you"></child>
     </div>
     <script>
         Vue.component('child',{
               props:{
                  content:{
                      type:String,
                      validator:function(value) {
                           return  (value.length>5)
                      }
                  }
               },
               template:'<div>{{content}}</div>'
         });
         var vm=new Vue({
             el:'#root'
         })
     </script>
</body>
</html>

　　效果：vue

修改content的内容：npm

将.net

<child content="you "></child> 
改成

<child content="helloworld"></child
>
效果：

这就是参数校验