组件参数校验
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue</title> 6 </head> 7 <body> 8 <div id="app"> 9 <child :content="'abc'"></child> 10 </div> 11 12 <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 --> 13 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 14 <script> 15 Vue.component('child', { 16 props: { 17 content: { 18 //参数校验 19 type: String,//:content的类型，也可以写[String, Number] 20 required: true,//:content是否必须写，true是必须，false是不必须 21 default: 'default value',//若required:false时，页面显示的默认值 22 validator: function(value) {//自定义校验器 23 return (value.length > 5) 24 } 25 } 26 }, 27 template: '<div>{{content}}</div>' 28 }) 29 var app = new Vue({ 30 el: '#app' 31 }) 32 </script> 33 </body> 34 </html>
props特性
子组件有props,父组件传递content,子组件接收content
非props特性
父组件传递content,子组件没有props,没接收content。1、使用content时报错。2、content属性会展示在子组件最外层的dom标签html属性里面