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

青旅半醒 2022-06-13 11:59 291阅读 0赞

父组件: app.vue

<template>
      <div id="app">
        <img src="./assets/logo.png">
        
        
        
        
        
        <headerDiv :logo="logoMsg" @transferuser="getUser"></headerDiv>
        <p>用户名为:{
       {user}}(我是子组件传递给父组件的数据)</p>
        <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',
      		user:''
      	}
      },
      components:{firstcomponent,headerDiv},
      methods:{
      	getUser:function(msg){
      		this.user = msg;
      		console.log(msg);
      	}
      }
    }
    </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>

子组件:header.vue

<template>  
<div>  
  
<div id='logo'>\{ \{logo\}\}(我是父组件传递过来的值)</div>  
<ul class="nav">  
<li v-for="nav in navs">\{ \{nav.li\}\}</li>  
</ul>  
  
  
<span>用户名</span>  
<input v-model="username" @change='setUser'>向父组件传值</button>  
</div>  
  
  
</template>  
<script>  
export default\{  
name:'headerDiv',  
data()\{  
return\{  
navs:\[  
\{li:'主页'\},  
\{li:'日志'\},  
\{li:'说说'\},  
\{li:'主页'\},  
\{li:'相册'\}  
\],  
username:''  
\}  
\},  
props:\['logo'\],  
methods:\{  
setUser:function()\{  
this.$emit("transferuser",this.username);  
\}  
\}  
\}  
  
</script>  
<style scoped>  
.nav li\{list-style: none;\}   
</style>