Vue中$emit的简单用法

<template>
  <div>
    {{city}}
    <br />-----------------------------
    <Son :city="city" @changeCity="changeCity" />
  </div>
</template>

<script>
import Son from "./son";//引入son组件
export default {
  data() {
    return {
      city: "北京"
    };
  },
  components: {
    Son//声明组件
  },
  methods: {
    changeCity(val) {
      this.city = val;
    }
  }
};
</script>

<style scoped>
div {
  color: blue;
}
span {
  color: black;
}
</style>

<template>
  <div>
    父组件传递的数据：{{city }}
    <br />
    这是子组件的数据：{{City}}
    <br />
    <el-button @click="changeCity">点击</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      City: "昆明"
    };
  },
  props: {
    city: String
  },
  methods: {
    changeCity() {
      this.$emit("changeCity", this.City);
    }
  }
};
</script>

<style scoped>
div {
  color: black;
}
</style>

北京
------------
这是父组件的数据：北京
这是子组件的数据：昆明
[点击]//这是一个按钮

昆明
-------------
这是父组件的数据：昆明
这是子组件的数据：昆明
[点击]