Vue中$emit的简单用法

Posted 2021-03-06 wwttc

通过$emit 实现实现父子组件间通信

我们先创建一个叫parent的组件和一个叫son的组件

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

son组件如下

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

运行之后我们可以看到

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

我们点击按钮之后页面变为

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

 

我的理解是$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件

当按钮被点击时 子组件中的City传递给了父组件，并且使得父组件中city的值变为子组件的City的值