父组件信息传递给子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<my-hello></my-hello>
</div>
<template id="hello">
<div>
<h3>我是父组件 </h3>
<h2>msg: {{msg}}</h2>
<hr>
<my-world :message="msg"></my-world>
</div>
</template>
<template id="world">
<div>
<h3>我是子组件</h3>
<h3>父组件的信息:{{message}}</h3>
</div>
</template>
</body>
<script>
new Vue({
el: "#app",
components: {
'my-hello':{
data: function () {
return {
msg: '这是父组件的信息'
}
},
template: "#hello",
components:{
'my-world':{
template:"#world",
props: ['message'],
props:{ //也可以是对象，允许配置高级设置，如类型判断、数据校验、设置默认值
message:String,
name:{
type:String,
required:true
},
age:{
type:Number,
default:18,
validator:function(value){
return value>=0;
}
},
user:{
type:Object,
default:function(){ //对象或数组的默认值必须使用函数的形式来返回
return {id:3306,username:'秋香'};
}
},
}
}
}
})
</script>
</html>