demo地址
前面介绍了父组件向子组件传值,那么子组件如何向父组件传值呢?
以前面的demo为例,假如header要向app.vue传递一个值.我们需要利用$emit()方法来实现.
首先在header中:
<script>
export default
{
name: 'app-header',
props:{
info:{
type : String
}
},
data(){
// noinspection JSAnnotator
return{
title : '这是一个header'
}
},
methods:{
changeInfo:function (){
this.$emit("infoChange","子向父传值");
}
}
}
</script>
说明:
-
infoChange表示注册了一个事件,这是事件名 - 后面的
"子向父传值"是我要传递给父组件的参数
然后我们需要在app.vue中绑定这个事件:
<template>
<div id="app">
//绑定注册事件
<app-header v-on:infoChange="update($event)" v-bind:info="info"></app-header>
<myComponent v-bind:users="users"></myComponent>
<myComponent v-bind:users="users"></myComponent>
<app-footer v-bind:info="info"></app-footer>
</div>
</template>
说明:
-
infoChange:就是绑定的事件名和header之中的注册事件一致. -
"update($event)":绑定事件需要执行的方法,在这个方法内我们可以接收到传递过来的值.
methods:{
update:function (info){
this.info = info;
}
}
这样就实现了从子组件到父组件传值的过程.
