<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件参数校验与非props属性</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child :num="123" :content='test' str="abc"></child>
</div>
<script>
Vue.component('child', {
props: {
num:[Number,String],
str:String,
content:{
type:String,
require:true,
default:"default value",
validator:function(valve){//自定义校验器
return (value.length>5)
}
}
},
template: "<div>{{num}}+'-----'+{{str}}</div>"
})
var vm = new Vue({
el: '#app'
})
</script>
</body>
</html>
props 父传 子接
非props 父传子不接 对应属性值会显示子组件最外层标签上
网友评论