通过 Prop 向子组件传递数据
为了说明此案列 此处使用了三个经典的案列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<style>
#app{
margin: 1em;
font-size: 1.2em;
}
.component div{
margin-bottom: 1em;
}
</style>
</head>
<body>
<div id="app">
<my-component :parent-msg="msg"></my-component>
</div>
<script type="text/x-template" id="my-component">
<div class="component">
<div> ParentMsg:{{parentMsg}}</div>
<div> childMsg:{{msg}}</div>
</div>
</script>
<script>
//register
Vue.component('my-component',{
props:['parentMsg'],
template:'#my-component',
data:function () {
return {
msg:'Msg of Child!'
}
}
});
// a root instarnce
new Vue({
el:'#app',
data:{
msg:'Msg of Parent!'
}
});
</script>
</body>
</html>
案列1 如上
效果如下
ParentMsg:Msg of Parent!
childMsg:Msg of Child!
{{parentMsg}} 在data中尚未定义 但是在<my-component :parent-msg="msg"></my-component> 可以看到 他是使用父类的msg
所以才能拿到父类的数据
还有一点要注意 props里面写的是parentMsg 而对应着html中的parent-msg
案列2 和案例1,就一出不一样
这个地方改成了
<div id="app">
<my-component :parent-msg="msg"></my-component>
</div>
<div id="app">
<my-component parent-msg="msg"></my-component>
</div>
打印效果就变成了
ParentMsg:msg
ChildMsg:Msg of child
案例3 主要是数据类型验证 详解都写注释里了
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<title>Prop-Validation</title>
<style>
#app {
margin: 1em;
font-size: 1.2em;
}
.component div {
margin-bottom: 1em;
}
</style>
</head>
<body>
<div id="app">
<my-component :prop-a="msg"></my-component>
</div>
<script type="text/x-template" id="my-component">
<div class="component">
{{propD}}
</div>
</script>
<script>
//register
// register
Vue.component('my-component',{
props:{
parentMsg:null,//null 代表不检查性别
propA:Number,//限定数字
propB:[String,Number],//多重条件可用[] 隔开
propC:{
//必要,且限定字符串类型
type:String,
//相当于表单中的
// required:ture
},
propD:{
//数字类型 而且有预设值
type:Number,
default:100
},
propE:{
//Object类型 代表可接受的是个对象或者数组
type:Object,
default:function () {
return {
message:'hello'
}
}
},
propF:{
//自定条件检验
validator:function (value) {
return value>110
}
}
},
template:'#my-component',
data:function () {
return{
msg:"Msg of Child"
}
}
});
//create a root instance
new Vue({
el:'#app',
data:{
msg:123
}
});
</script>
</body>
</html>
就是验证类型的 下面分享一种错误写法,a对应a 这样子才是正确的
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<title>Prop-Validation</title>
<style>
#app {
margin: 1em;
font-size: 1.2em;
}
.component div {
margin-bottom: 1em;
}
</style>
</head>
<body>
<div id="app">
<my-component :prop-a="msg"></my-component>
<my-component :prop-b="msg"></my-component>
<my-component :prop-c="msg"></my-component>
<my-component :prop-d="msg"></my-component>
<my-component :prop-e="msg"></my-component>
<my-component :prop-f="msg"></my-component>
<my-component :parent-msg="msg"></my-component>
</div>
<script type="text/x-template" id="my-component">
<div class="component">
<hr>
<p> a:{{propA}}</p>
<p> b:{{propB}}</p>
<p> c:{{propC}}</p>
<p> d:{{propD}}</p>
<p> e:{{propE}}</p>
<p> f:{{propF}}</p>
<p> parentMsg:{{parentMsg}}</p>
</div>
</script>
<script>
//register
// register
Vue.component('my-component',{
props:{
parentMsg:null,//null 代表不检查性别
propA:Number,//限定数字
propB:[String,Number],//多重条件可用[] 隔开
propC:{
//必要,且限定字符串类型
type:String,
//相当于表单中的
required:true
},
propD:{
//数字类型 而且有预设值
type:Number,
default:100
},
propE:{
//Object类型 代表可接受的是个对象或者数组
type:Object,
default:function () {
return {
message:'hello'
}
}
},
propF:{
//自定条件检验
validator:function (value) {
return value<110
}
}
},
template:'#my-component',
data:function () {
return{
msg:"Msg of Child"
}
}
});
//create a root instance
new Vue({
el:'#app',
data:{
msg:123
}
});
</script>
</body>
</html>