VUE2子=>父通信（子组件向父组件传值）

VUE2子=>父通信

1.在子组件中创建一个按钮，给按钮绑定一个点击事件

<template>
  <div>
    <div>我是子组件</div>
    <div>{{msg}}</div>
    <button @click='sedMsg'>向父传值</button>
  </div>
</template>
<script type="text/javascript">
    export default{
      props:{
        msg:{
          type:String,
          default:"哈哈哈金合欢花"
        }
      },
      methods:{
        sedMsg(){
          let data={
            a:"data我是信息"
          };
          this.$emit('baf',data,"这是另一个东西")
          //子传父一般是事件加$emit进行传值
        }
      }
    }
</script>

2.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

<template>
    <div>
      <child  @baf="show"></child>
    </div>
</template>

<script>
import child from './components/child.vue'

export default {
  name: 'App',
  data(){
    return{
      msg:"我是父组件消息"
    }
  },
  components: {
    child:child
  },
  methods:{
    show(...data){//es6的解构赋值
      console.log("allData",data)
    }
  }
}
</script>

所以总结如下：
1.子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
2.将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法，多个值的话利用es6的解构赋值
3.在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听