Vue子组件向父组件传值

我们的目的是 ：通过子组件传递值给父组件，改变父组件的属性值，并通过父组件改变另一个子组件的值

父组件的的代码如下

<template>
   // 子组件绑定一个方法 changeTitle 
  <div id ="appheader" v-on:click="changeTitle">
    <h1>{{this.title}}</h1>
    </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
     title:"hello vue! nice to meet you "
    }
  },
  methods:{
  // 这个方法将在父组件中寻找 titleChanged标记的元素

    changeTitle:function(){
      // 第二个参数是需要传递的新的title的值

      this.$emit("titleChanged","子向父组件传值");
    }
  }
}
</script>

父组件的代码如下

<template>
  <div id="app">
   <h1>{{title}}</h1>
   // 在这里注册了标记 将调用改变标题的方法

  <appheader v-on:titleChanged="updateTitle($event)"></appheader>
  // 在这里给另一个子组件也绑定了父组件的title 

  <appfooter v-bind:title=title></appfooter> 
  </div>
</template>
<script>
import appheader from  './components/Header'
import footer from './components/footer'
export default {
  name: 'App',
  data() {
    return {
      title:"这是我的第一个vue程序",
      theuser:[{name:"zhangsan",position:"java开发",show:false},
      {name:"zhangsan",position:"java开发",show:false},
      {name:"zhangsan",position:"java开发",show:false},
      {name:"zhangsan",position:"java开发",show:false}],
    }
  },
  components:{
    "appheader":appheader,
    "appfooter":footer,
    },
    methods:{
    updateTitle(title){
     this.title = title;
    }
  }
}
</script>
<style>
h1 {
  color:red;
}
</style>

另一个子组件，这个子组件的title也会改变

<template>
  <footer>
    <h1>{{copyright}}</h1>
    <p>{{title}}</p>
</footer>
</template>

<script>
export default {
  name: 'app-footer',
  props:["title"],
  data () {
    return {
     copyright:"copyright 2018 Vue Demo "
    }
  }
}
</script>

<style scoped >
footer {
  background: #222;
  padding: 6px;
}
h1 {
  color: lightgreen;
  text-align: center;
}
p{
  color: lightgreen;
  text-align: center;

}
</style>

演示效果
点击之前

点击之后