HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vuedemo</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
JS
//引入vue框架
import Vue from 'vue'
import App from './App'
new Vue({
el:'#app',
render: function (h){
return h(App)
}
})
父组件
<template>
<div id="app">
<HeaderDiv :logo = "logoMsg"></HeaderDiv>
</div>
</template>
<script>
import HeaderDiv from './components/a'
export default{
name :'#app',
data(){
return {
logoMsg:"我是传过去的数据"
}
},
components:{
HeaderDiv:HeaderDiv
}
}
</script>
子组件
<template>
<header class="header">
<div class="logo">{{ logo }}</div>
<ul class="nav">
<li v-for="nav in navs">{{nav.li}}</li>
</ul>
</header>
</template>
<script>
export default{
name:'headerDiv',
data(){
return {
navs:[
{li:'日志'},
{li:'小数'},
{li:'想吃'},
]
}
},
props:['logo']
}
</script>