<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<!-- vue中定义 → 传入子组件 → 子组件验证 → 子组件template 显示 -->
<body>
<div id="demo">
<!-- 这里的d事必传项 因为他定义了 required:true -->
<my-assemly :a='a' :b='b' :c='c' :d='d' :e='e' :f='f' :g='g'></my-assemly>
</div>
<script>
// 定义组件
Vue.component('my-assemly',{
props:{
//要求a为Number类型
a:Number,
//b 即可以Number 也可以 String
b:[String,Number],
//必须是布尔类型 默认值事true type(类型) required(必传项、非必传项) default(指定默认值)
c:{
type:Boolean,
default:true,
},
d:{
type:Number,
//必传项目 不传的报错
required:true
// 错误反馈:
// vue.js:597 [Vue warn]: Missing required prop: "d"
// found in
// ---> <MyAssemly>
// <Root>
},
e:{
type:Array,
default:function(){
// 当传入的数组事空的就会显示下边 默认值
return[666]
}
},
f:{
validator:function(value){
return value>10
}
},
g:{
type:Function
}
},
template:'<div>a:{{a}}</br>b:{{b}}</br>c:{{c}}</br>d:{{d}}</br>e:{{e}}</br>f:{{f}}</br>g:{{g}}</div>'
})
var app = new Vue({
el: '#demo',
data: {
a:1,
b:'组件送判定为 字符串货Number 类型',
c:true,
d:11111,
e:[1,2,3,4],
// 自定义一个验证函数
f:88,
g:console.log()
}
})
</script>
</body>
</html>
复制代码
转载于:https://juejin.im/post/5ba077eef265da0aa3591e2d