[JS][Vue]学习记录之子向父传值

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;
    }
  }

这样就实现了从子组件到父组件传值的过程.