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>
运行结果
image-20210613110012006.png
父组件给子组件传动态参数
<!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>
运行结果
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>
运行结果
image-20210613110623069.png
父组件给子组件传函数
<!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("函数执行成功！")
}
},
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>
运行结果
image-20210613111125225.png
设置必须传参数
<!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>
运行结果
image-20210613123623423.png
为参数设置默认值
<!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: '大哥刘备' // 默认值，也可以是一个函数
}
},
template: `
<div>
{{ typeof message }}
{{ message }}
</div>
`
})
const vm = app.mount('#root');
</script>
</html>
运行结果
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, // 要求传数字
required: true, // 要求必须传
default: 100, // 默认值
validator: function(value){
return value < 1000;
} // 限定值
}
},
template: `
<div>
{{ typeof message }}
{{ message }}
</div>
`
})
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210613124552130.png
