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

深藏阁楼爱情的钟 2022-06-13 09:11 371阅读 0赞

父组件: app.vue

子组件: header.vue

子组件:

<template>
    	<div>
    		
    		<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">
        
        <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>