从上一篇文章中可以看到。
现在我们希望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系列文章目录
- vue系列文章(1):对象绑定,属性绑定
- Vue系列文章(2)事件绑定,鼠标点击事件
- vue系列文章(3):事件修饰符
- Vue系列文章(4)键盘事件及键盘修饰符
- vue系列文章(5)双向数据绑定
- vue系列文章(6)计算属性computed
- vue系列文章(7)动态CSS类型绑定
- vue系列文章(8)条件渲染
- vue系列文章(9)v-for条件循环
- vue系列文章(10)vue实战项目demo
- vue系列文章(11):初始化多个实例对象
- vue系列文章(12)初始组件的应用
- Vue系列文章(13)vue cli脚手架
- vue系列文章(14)vue-cli脚手架,组件嵌套,全局组件注册和局部组件注册
- vue系列文章(15)属性传值props
- vue系列文章(16)传值和传引用的类型和区别
- vue系列文章(17)利用事件传递将子组件值传递给父组件
- vue系列文章(18)vue生命周期
- vue系列文章(19)vue路由配置
- vue系列文章(20) vue网络请求vue-resource
如果上面文章对你有用,打赏下我吧@*@
methods: {
updateTitle(title){
this.title = title;
}
}
这个方法里面的参数title即是子组件传递过来的值.
这样就实现了子组件向父组件进行传值的操作。