vue系列文章（17）利用事件传递将子组件值传递给父组件

从上一篇文章中可以看到。

现在我们希望header里面的值传递给app父组件，将其title进行改变，并改变header和footer的title值。

那么首先需要在子组件header里面进行声明一个方法

 

methods: {
  	changeTitle: function() {
  		// this.title = "这是更改过后的title"
  		this.$emit("titleChanged","子向父组件传值");
  	}
  }

子组件向父组件传值，需要采用$emit。后面跟的两个参数，第一个titleChanged是父组件的绑定的方法，第二个参数是传递的值。那么就需要在父组件app.vue中这样实现。

 

<v-header v-on:titleChanged="updateTitle($event)" v-bind:title="title"></v-header>

绑定方法v-on:titleChanged的方法名是titleChanged一定要和子组件的第一个参数名对应，里面的方法是updateTitle是自定义的方法，其中参数一定要写$event参数。

那么再实现updateTitle即可。

   Vue系列文章目录 

1. vue系列文章（1）：对象绑定，属性绑定
2. Vue系列文章（2）事件绑定，鼠标点击事件
3. vue系列文章（3）：事件修饰符
4. Vue系列文章（4）键盘事件及键盘修饰符
5. vue系列文章（5）双向数据绑定
6. vue系列文章（6）计算属性computed
7. vue系列文章（7）动态CSS类型绑定
8. vue系列文章（8）条件渲染
9. vue系列文章（9）v-for条件循环
10. vue系列文章（10）vue实战项目demo
11. vue系列文章(11)：初始化多个实例对象
12. vue系列文章（12）初始组件的应用
13. Vue系列文章（13）vue cli脚手架
14. vue系列文章（14）vue-cli脚手架，组件嵌套，全局组件注册和局部组件注册
15. vue系列文章（15）属性传值props
16. vue系列文章（16）传值和传引用的类型和区别
17. vue系列文章（17）利用事件传递将子组件值传递给父组件
18. vue系列文章（18）vue生命周期
19. vue系列文章（19）vue路由配置
20. vue系列文章（20） vue网络请求vue-resource

 如果上面文章对你有用，打赏下我吧@*@

methods: {
    updateTitle(title){
      this.title = title;
    }
  }

这个方法里面的参数title即是子组件传递过来的值.

这样就实现了子组件向父组件进行传值的操作。