<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件参数校验与非props特性</title>
<script src='./vue.js'></script>
</head>
<body>
<!--:content表示后面是js表达式-->
<!--:content="'9ss'" 以这种方式传递字符串-->
<div id="app">
<child :content="'hello1'"></child>
<!--这个text就是非props特性,在父组件里定义了,但是子组件没有在pros里接收-->
<child text="hello1"></child>
</div>
<script>
Vue.component('child', {
props: {
<!--content: [Number, String], 可以传递数字或者字符串-->
content: { <!--设置content的具体参数校验条件-->
type: String,
required: true,
default: 'default 1',
<!--content的长度大于5才能校验通过-->
validator: function(value) {
return (value.length > 5)
}
}
},
template: '<div>{{content}}</div>'
})
var app = new Vue({
el: '#app',
})
</script>
</body>
</html>
组件参数校验与非props特性
最新推荐文章于 2022-04-13 14:00:00 发布