组件参数校验与非props特性

最新推荐文章于 2024-11-11 16:32:44 发布

原创最新推荐文章于 2024-11-11 16:32:44 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

vue.js框架专栏收录该内容

13 篇文章

订阅专栏

本文通过一个简单的Vue组件示例介绍了如何进行组件参数校验，并展示了如何使用默认值及验证函数确保传递给组件的属性符合预期。该示例还包含了基本的HTML结构和Vue.js脚本。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>组件参数校验与非props特性</title>
<script src="./vue.js"></script>
</head>
<body>

<div id="root">
<child content="helloa"></child>
</div>

<script>
Vue.component('child',{
props:{
content:{
type: String,
/*required: false,
default:'default value' //若不传，则为默认值
validator:function(value){
return(value.length > 5)
}*/
}
},
template:'<div>{{content}}</div>'
})

var vm = new Vue({
el:'#root'

})
</script>

</body>
</html>