码迷,mamicode.com
首页 > 其他好文 > 详细

vue中 $emit的简单使用

时间:2021-04-16 11:51:25      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:地方   使用   line   一个   color   ble   进入   mit   list   

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

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;
    },

 

vue中 $emit的简单使用

标签:地方   使用   line   一个   color   ble   进入   mit   list   

原文地址:https://www.cnblogs.com/liu2lognew/p/14662886.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!