32-vue的父傳子props屬性基本使用（物件形式）可型別限制，驗證，預設值
阿新 • • 發佈：2021-01-11
驗證支援的型別
String
Number
Boolean
Array
Object
Date
Function
Symbol
1、型別限制（單值）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
< 2、型別限制（多個限制）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id ="app">
<!-- 使用父元件的資料時，必須使用v-bind指令 -->
<cpn :cmessage="message"></cpn>
</div>
<template id="cpn">
<div>
<h2>{{cmessage}}</h2>
</div>
</template>
<script>
// 父傳子：props
const cpn={
template : '#cpn',
props:{
// 2，型別限制（ 'null'匹配任何型別）
cmessage:[String,Number]
}
}
//建立Vue例項,得到 ViewModel
var vm = new Vue({
el: '#app',
data:{
message: '好冷啊',
movides:['溫暖的抱抱','拆彈專家','送你一朵紅花']
},
components:{
cpn
}
});
</script>
</body>
</html>
3、required
使用required必須使用v-bind繫結相應的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id ="app">
<!-- 使用父元件的資料時，必須使用v-bind指令 -->
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>{{cmessage}}</h2>
<h2>{{cmovides}}</h2>
</div>
</template>
<script>
// 父傳子：props
const cpn={
template : '#cpn',
props:{
cmessage:{
type: String,
required: true
},
cmovides:{
type: Array
}
}
}
//建立Vue例項,得到 ViewModel
var vm = new Vue({
el: '#app',
data:{
message: '好冷啊',
movides:['溫暖的抱抱','拆彈專家','送你一朵紅花']
},
components:{
cpn
}
});
</script>
</body>
</html>
4、帶有預設值的字串
使用預設值，則不需要使用v-bind繫結。如果使用了v-bind繫結，則預設值無效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id ="app">
<!-- 使用父元件的資料時，必須使用v-bind指令 -->
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>{{cmessage}}</h2>
</div>
</template>
<script>
// 父傳子：props
const cpn={
template : '#cpn',
props:{
cmessage:{
type: String,
default : '踏山河'
}
}
}
//建立Vue例項,得到 ViewModel
var vm = new Vue({
el: '#app',
data:{
message: '好冷啊',
movides:['溫暖的抱抱','拆彈專家','送你一朵紅花']
},
components:{
cpn
}
});
</script>
</body>
</html>
5、帶有預設值的陣列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id ="app">
<!-- 使用父元件的資料時，必須使用v-bind指令 -->
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>{{cmessage}}</h2>
</div>
</template>
<script>
// 父傳子：props
const cpn={
template : '#cpn',
props:{
// 物件或陣列預設值必須從一個工廠函式獲取
cmessage:{
type: Array,
default(){
return ['真冷','生死無話']
}
}
}
}
//建立Vue例項,得到 ViewModel
var vm = new Vue({
el: '#app',
data:{
message: '好冷啊',
movides:['溫暖的抱抱','拆彈專家','送你一朵紅花']
},
components:{
cpn
}
});
</script>
</body>
</html>
6、使用validator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id ="app">
<!-- 使用父元件的資料時，必須使用v-bind指令 -->
<cpn :cmessage="message"></cpn>
</div>
<template id="cpn">
<div>
<h2>{{cmessage}}</h2>
</div>
</template>
<script>
// 父傳子：props
const cpn={
template : '#cpn',
props:{
cmessage:{
// cmessage值必須匹配下列字串中的一個,否則會報錯
validator(value){
return ['success','warn'].indexOf(value)!==-1;
}
}
}
}
//建立Vue例項,得到 ViewModel
var vm = new Vue({
el: '#app',
data:{
message: 'warn',
movides:['溫暖的抱抱','拆彈專家','送你一朵紅花']
},
components:{
cpn
}
});
</script>
</body>
</html>