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.在父組件中註冊子組件並在子組件標籤上綁定對自定義事件的監聽