元件引數校驗與非props特性

依米_發表於2018-05-16
元件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元件引數校驗與非props特性</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<!--元件引數校驗就是子元件對來自父元件的值進行處理-->
<div id="app">
<child :content="123"></child><!--父元件向子元件傳遞-->
</div>
<script>
Vue.component('child',{
// props:['content'],
//子元件接收來自父元件的變數，如果子元件要接收的是數字，就需要處理了。
//第一步在父元件content前加冒號
//第二步在props裡宣告number
props:{
content:Number
},
template:'<div>{{content}}</div>'
})
var vm = new Vue({
el:"#app",
data:{

}
})
</script>
</body>

</html>


元件的引數校驗

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元件引數校驗與非props特性</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<!--元件引數校驗就是子元件對來自父元件的值進行處理-->
<div id="app">
<child content="hello world"></child><!--父元件向子元件傳遞-->
</div>
<script>
Vue.component('child',{
// props:['content'],
//子元件接收來自父元件的變數，如果子元件要接收的是數字，就需要處理了。
//第一步在父元件content前加冒號
//第二步在props裡宣告number
props:{
// content:[Number,String]//content還可以跟陣列，物件
content:{
type:String,
// required:true,//1.表示content必傳
// default:'de'//2.表示父元件content可傳可不穿，若不傳則顯示de
validator:function  (value) {//3.自定義校驗器 validator方法 校驗字串的長度
return (value.length >5)
//若content="he"，小於5 則報錯
}
}
},
template:'<div>{{content}}</div>'
})
var vm = new Vue({
el:"#app",
data:{

}
})
</script>
</body>

</html>

非props特性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元件引數校驗與非props特性</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<!--元件引數校驗就是子元件對來自父元件的值進行處理-->
<div id="app">
<child content="hello world"></child><!--父元件向子元件傳遞-->
</div>
<script>
// props特性就是在父元件裡宣告瞭content變數,在子元件裡剛好props 裡接收
// 非props特性就是在父元件裡宣告瞭content變數,在子元件裡沒有定義props 裡接收，//那麼會在dom標籤錄裡顯示content="hello world"
Vue.component('child',{


// props:{
//
// content:{
// type:String,
//
//
// }
// },
template:'<div>heloo</div>'
})
var vm = new Vue({
el:"#app",
data:{

}
})
</script>
</body>
</html>

相關文章