vue父传子的使用
vue父传子的使用
vue父传子需要注意的几点，先分别声明局部组件，再声明入口文件，局部组件挂载到入口文件，入口文件挂载到vue实例上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.head{height:80px;background:red;}
.main{height:100px;background:blue;}
</style>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<App/>
</div>
<script type="text/javascript">
//先声明后使用
var Vheader={
template:`
<div class="head">头部</div>
`
}
var Vmain={
template:`
<div class="main">{{msg}}</div>
`,
props:["msg"]
}
//声明入口文件
var App={
template:`
<div>
<Vheader/>
<Vmain :msg="msg"/>
</div>
`,
data(){
return{
msg:'Vue.js'
}
},
components:{
Vheader,
Vmain
}
}
new Vue({
el:"#app",
components:{
App
}
})
</script>
</body>
</html>
