<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child></child><!--用props来传递content,content="hello world"默认值不显示-->
</div>
</body>
<script>
Vue.component('child',{
template:'<div>{{content}}</div>',
props:{
//content:[String,Number]//用对象的方式来传递字符串,可以用Number
content:{
type:String,
//required:false,
//default:'default value'//默认值
validator:function(value){
return(value.length>5)
}
}
}
})
var vm=new Vue({
el:'#app',
})
</script>
</html>
- 上一篇: vue.js的基础注意事项
- 下一篇: vue.js给组件绑定原生事件