Vue中父组件监听子组件事件时$emit的用法

$emit使用时需要满足以下两个条件：

1.父组件可以通过 Prop 向子组件传递数据

2.子组件可以使用 $emit方法监听父组件的自定义事件。

$emit

• 参数：

  • {string} eventName
  • [...args]

eventName:指父组件注册的事件名称；

args:父组件注册的事件参数，参数数量不限

请看如下代码：

1.父组件

<template>
    <div>
        <div style="font-weight:bold">{{fatherText}}：{{toChild}}</div>
        <br>
        <child-data @showFatherData="updateFatherData" :toChildData="toChild"></child-data>
    </div>
</template>

<script>
import ChildData from './childData.vue'
export default {
    name:'fatherData',
    //子组件
    components: {ChildData},
    data () {
      return {
        toChild:"Father Data",
        fatherText:'父组件的toChild'
      }
    },
    methods:{
      //触发子组件sendToFather事件
      updateFatherData(data){
        this.fatherText='父组件接收子组件的toChild'
        //改变了当前父组件的值
        this.toChild = data.childData;
      }
    }
}
</script>

2.子组件

<template>
  <div class="child-data">
    <h3 style="font-weight:bold">{{childText}}:{{ curChildData }}</h3>
    <button @click="sendToFather(`Child To Father Data`)">点击将‘Child To Father Data’传递给父组件</button>
  </div>
</template>
<script>
export default {
  name: "childData",
  // 用来接收父组件传给子组件的数据
  props: ["toChildData"], 
  data(){
    return {
      curChildData:this.toChildData,
      childText:'父组件传递给子组件的toChild'
    }
  },
  methods: {
    sendToFather(val) {
      this.childText='子组件传递给父组件的toChild'
      this.curChildData=val
      var data = {
        childData: val
      };
      //sendToFather事件触发后，使用$emit自动触发showFatherData事件,data为showFatherData的参数，可以有多个
      this.$emit("showFatherData", data); 
    }
  }
};
</script>

3.运行项目

点击后页面：