子组件:
<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>