父组件向子组件传递数据(vue.js)

子组件:

<template>  
    <div>  
        <!--  
            logo 是在data中(父组件)定义的变量  
            如果需要从父组件中获取logo的值,就需要使用props['logo'], 如30行  
            在props中添加了元素以后,就不需要在data中(子组件)中再添加变量了  
        -->  
        <div id='logo'>{{logo}}(我是父组件传递过来的值)</div>  
        <ul class="nav">  
            <li v-for="nav in navs">{{nav.li}}</li>  
        </ul>       
    </div>  
  
</template>  
<script>  
    export default{  
        name:'headerDiv',  
        data(){  
            return{  
                navs:[  
                    {li:'主页'},  
                    {li:'日志'},  
                    {li:'说说'},  
                    {li:'主页'},  
                    {li:'相册'}  
                ]  
            }  
        },  
        props:['logo']  
    }  
      
</script>  
<style scoped>  
    .nav li{list-style: none;}   
</style>  

父组件:

<template>  
  <div id="app">  
    <img src="./assets/logo.png">  
    <!--  
        在调用组件的时候,使用v-bind将logo的值绑定为 APP.vue中定义的变量 logoMsg  
        然后就能将App.vue中的logoMsg的值传给header.vue 了  
    -->  
    <headerDiv :logo="logoMsg"></headerDiv>  
    <h1>{{msg}}</h1>  
    <firstcomponent></firstcomponent>  
  
    <router-view></router-view>  
  </div>  
</template>  
  
<script>  
import firstcomponent from './components/firstcomponent.vue'  
import headerDiv from './components/header.vue'  
export default {  
  name: 'app',  
  data(){  
    return{  
        msg:'hellow Vue',  
        logoMsg:'WiseWrong'  
    }  
  },  
  components:{firstcomponent,headerDiv},  
}  
</script>  
  
<style>  
#app {  
  font-family: 'Avenir', Helvetica, Arial, sans-serif;  
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;  
  text-align: center;  
  color: #2c3e50;  
  margin-top: 60px;  
}  
</style>