vuejs子向父组件传值

子向父组件传值使用：this.$emit，在里面绑定需要传值的对象，代码如下：

<template>
  <header v-on:click="changeTitle">
     <h1>{{title1}} -- {{title}}</h1>
  </header>
</template>

<script>
export default {
  name: 'app-header',
  props:{
     title:{
	    type:String
	 }
  },
  data () {
    return {
      title1: "vue.js demo"
    }
  },
  methods:{
     changeTitle:function(){
	    //this.title="changed";
		this.$emit("titleChanged","子向父传值");
	 }
  }
}
</script>


<style scoped>
header{
   background: lightgreen;
   padding: 10px;
}


h1{
   color:#222;
   text-align: center;
}
</style>

<template>
  <div id="app">	 
	 <app-header v-on:titleChanged="updateTitle($event)"
	 v-bind:title="title"></app-header>
	 <users v-bind:users="users"></users>
	 <users v-bind:users="users"></users>
	 <app-footer v-bind:title="title"></app-footer>
  </div>
</template>

<script>

//局部注册组件
import Users from './components/Users'
import Header from './components/Header'
import Footer from './components/Footer'

export default {
  name: 'App',
   data () {
    return {
      users: [
	      {name:"luke1",position:"web开发1",show:false},
		  {name:"luke2",position:"web开发2",show:false},
		  {name:"luke3",position:"web开发3",show:false},
		  {name:"luke4",position:"web开发4",show:false},
	      {name:"luke5",position:"web开发5",show:false}
	  ],
	  title:"传递的是一个值，number,string,boolean"
    }
  },
  methods:{
     updateTitle(title){
	    this.title=title;
	 }
  },
  components:{
     Users,
	 "app-header":Header,
	 "app-footer":Footer
  }
}
</script>

<style scoped>
h1{
   color:purple;
}
</style>