vue中 $emit的简单使用

时间：2021-04-16 11:51:25 收藏：0 阅读：0

这里记录两种自己接触过的

1.子组件通知父组件

先通过import方法在父组件中引入子组件，这里我是将子组件（页面）扩展成全局dialog引入的

引入的流程如下

 <el-dialog :visible.sync="dialogFormContactVisible" :fullscreen="true" width="100%" @close="close()">
      <contract-list ref="contact" v-on:refreshbizlines="rollback()" keep-alive></contract-list>
    </el-dialog>

import contractList from "../这里是子组件（页面）路径";

components: {
  contractList,
},

例子：在子组件中需要回调时使用

 this.$emit(‘refreshbizlines‘);

在父组件中使用v-on方法接受，这里我是自定义了个接收方法，连起来就是

父组件中引入子组件，点击或进行判断进入子组件，在需要的地方调用 $emit方法回到父组件中

v-on:要和$emit声明的字段一样才能接收并调用方法进行后续操作，我这里是刷新了下页面

2.带数据

举例最简单的一种，单个数据，

子组件中需要传输一个数据

this.$emit("changeItem", curVal);

父组件中

 @changeItem="pswChange($event)

这里声明的@方法名称要对应$emit的声明，

这时用一个方法来接收就行了

pswChange(code){
      this.authCode=code;
    },