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

父组件: app.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!--
    	父组件传递数据给子组件:
    	
    	在调用组件的时候,使用v-bind将logo的值绑定为 APP.vue中定义的变量 logoMsg
    	然后就能将App.vue中的logoMsg的值传给header.vue 了
    -->
    
    <!--
    	子组件传递数据给父组件:
    	
    	1.在父组件App.vue中,声明了一个方法getUser,用transferUser事件调用getUser方法，
    	  获取到从子组件传递过来的参数username
    	2.getUser方法中的参数msg就是从子组件传递过来的参数 username
    	 
    -->
    
    <!--
    	总结:vue的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。
      1:父组件向子组件传递数据:
              在vue中,可以使用props向子组件传递数据
        1): 子组件在props中创建一个属性,用于接收父组件传过来的值
        2): 父组件中注册子组件
        3): 在子组件标签中添加子组件props中创建的属性
        4): 把需要传给子组件的值赋给该属性
        
      2:子组件向父组件传递数据:
              子组件主要通过事件传递数据给父组件
        1):子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
        2):将需要传的值作为$emit的第二个参数,该值将作为实参传给相应自定义事件的方法
        3):在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
        
      3:子组件向子组件传递数据
        vue没有直接子组件对子组件传参的方法,建议将需要传递数据的子组件，都合并为一个组件.
      	 如果一定需要子组件对子组件传参,可以先传到父组件,再传到子组件，为了便于开发,vue推出了一个状态管理工具vuex，
      	 可以很方便的实现组件之间的参数传递。
    -->
    <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>
<!--
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>

<!--子组件向父组件传数据
1.@ : 是  v-on的简写
2.子组件主要通过事件传递数据给父组件
3.当input 的值发生变化时,将username传递给App.vue,首先声明了一个方法setUser，
 用change事件来调用setUser
4.在setUser中,使用了$emit来遍历transferUser事件,并返回this.username,其中transferUser
 是一个自定义事件,功能类似于一个中转,this.username将通过这个事件传递给父组件
-->
<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>