vue组件参数校验与非props特性

组件参数校验

 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属性里面

posted @ 2018-05-13 17:48  铜镜123  阅读(147)  评论(0)  编辑  收藏  举报