2光酣、組件間傳值及傳值校驗
父組件給子組件傳值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue庫 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>
<test message="Hello World!" />
</div>
`
});
app.component('test',{
props: ['message'],
template: `
<div>{{message}}</div>
`
})
const vm = app.mount('#root');
</script>
</html>
運行結(jié)果
image-20210613110012006.png
父組件給子組件傳動態(tài)參數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue庫 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
num: 123
}
},
template: `
<div>
<test message="123" />
<test :message="num" />
</div>
`
});
app.component('test',{
props: ['message'],
template: `
<div>{{ typeof message }}</div>
`
})
const vm = app.mount('#root');
</script>
</html>
運行結(jié)果
image-20210613110404258.png
子組件校驗父組件的傳參
String蜘矢、Array犀概、Boolean、Object挂滓、Function苦银、Symbol
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue庫 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
num: 123
}
},
template: `
<div>
<test message="123" />
<test :message="num" />
</div>
`
});
// String、Array、Boolean幔虏、Object纺念、Function、Symbol
app.component('test',{
props: {
message: String
},
template: `
<div>{{ typeof message }}</div>
`
})
const vm = app.mount('#root');
</script>
</html>
運行結(jié)果
image-20210613110623069.png
父組件給子組件傳函數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue庫 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
methods:{
add(){
console.log("函數(shù)執(zhí)行成功想括！")
}
},
template: `
<div>
<test :message="add" />
</div>
`
});
// 這里寫成校驗的寫法
app.component('test',{
props: {
message: Function
},
template: `
<div>
{{ typeof message }}
<button @click="message">點我</button>
</div>
`
})
const vm = app.mount('#root');
</script>
</html>
運行結(jié)果
image-20210613111125225.png
設(shè)置必須傳參數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue庫 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>
<test message="hello" />
<!--不傳參-->
<test />
</div>
`
});
// 這里寫成校驗的寫法
app.component('test',{
props: {
message: {
type: String, // 要求傳字符串（類型）
required: true // 要求必須傳（是否必須）
}
},
template: `
<div>
{{ typeof message }}
{{ message }}
</div>
`
})
const vm = app.mount('#root');
</script>
</html>
運行結(jié)果
image-20210613123623423.png
為參數(shù)設(shè)置默認(rèn)值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue庫 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>
<test message="hello" />
<!--不傳參-->
<test />
</div>
`
});
// 這里寫成校驗的寫法
app.component('test',{
props: {
message: {
type: String, // 要求傳字符串
required: true, // 要求必須傳
default: '大哥劉備' // 默認(rèn)值陷谱，也可以是一個函數(shù)
}
},
template: `
<div>
{{ typeof message }}
{{ message }}
</div>
`
})
const vm = app.mount('#root');
</script>
</html>
運行結(jié)果
image-20210613123909522.png
要求值小于1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue庫 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
number: 2000
}
},
template: `
<div>
<test :message="number" />
</div>
`
});
// 這里寫成校驗的寫法
app.component('test',{
props: {
message: {
type: Number, // 要求傳數(shù)字
required: true, // 要求必須傳
default: 100, // 默認(rèn)值
validator: function(value){
return value < 1000;
} // 限定值
}
},
template: `
<div>
{{ typeof message }}
{{ message }}
</div>
`
})
const vm = app.mount('#root');
</script>
</html>
運行結(jié)果
image-20210613124552130.png
