子组件自定义事件$emit实现新页面弹窗关闭之后父界面刷新

需求

弹窗关闭之后父界面刷新展示最新数据

业务字段较多，甲方要求增加新页面展示数据，且默认展开所有数据行。因框架已有不适用，默认文本数据较长tooltip展示，且有些字段slot格式复杂不支持框架view页面展示。故开发新页面，可查看可编辑。

效果图如下 F页面C子页面

实现方案

子页面作为Dialog整体引入父页面。子组件大文本添加slot 设置type属性为文本且不设置最大展开行

AVUE 大文本默认展开slot

      <template  slot="improvementMeasures">
        <el-input
          v-model="form.improvementMeasures"
          :disabled="false"
          type="textarea"
          :autosize="{ minRows: 4 }"
        >el-input>
      template>
1
2
3
4
5
6
7
8

VUE 自定义事件实现 父界面刷新

vue组件事件

在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件
父组件可以通过 v-on (缩写为 @) 来监听事件：

那么如何用呢?

去源码看看
vue.d.ts开发包源码部分 如下 可以看到VUE 通过关键字this可以引用很多内置方法

export interface Vue {
  readonly $el: Element;
  readonly $options: ComponentOptions<Vue>;
  readonly $parent: Vue;
  readonly $root: Vue;
  readonly $children: Vue[];
  readonly $refs: { [key: string]: Vue | Element | (Vue | Element)[] | undefined };
  readonly $slots: { [key: string]: VNode[] | undefined };
  readonly $scopedSlots: { [key: string]: NormalizedScopedSlot | undefined };
  readonly $isServer: boolean;
  readonly $data: Record<string, any>;
  readonly $props: Record<string, any>;
  readonly $ssrContext: any;
  readonly $vnode: VNode;
  readonly $attrs: Record<string, string>;
  readonly $listeners: Record<string, Function | Function[]>;

  $mount(elementOrSelector?: Element | string, hydrating?: boolean): this;
  $forceUpdate(): void;
  $destroy(): void;
  $set: typeof Vue.set;
  $delete: typeof Vue.delete;
  $watch(
    expOrFn: string,
    callback: (this: this, n: any, o: any) => void,
    options?: WatchOptions
  ): (() => void);
  $watch<T>(
    expOrFn: (this: this) => T,
    callback: (this: this, n: T, o: T) => void,
    options?: WatchOptions
  ): (() => void);
  $on(event: string | string[], callback: Function): this;
  $once(event: string | string[], callback: Function): this;
  $off(event?: string | string[], callback?: Function): this;
  $emit(event: string, ...args: any[]): this;
  $nextTick(callback: (this: this) => void): void;
  $nextTick(): Promise<void>;
  $createElement: CreateElement;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

思路

1. 定义新页面 子组件
2. 自定义事件$emit
3. 父页面 父组件 引入
4. 组件注册
5. 使用子组件 监听事件
6. 执行监听函数

核心代码

1. 事件定义

//事件名称 ，事件参数
$emit(event: string, ...args: any[]): this;
1
2

弹窗确认关闭函数内this关键字自定义事件success

confirmSave(){
	//other things;
	this.$emit('success');
	//done();
}
1
2
3
4
5

2. 帕斯卡命名组件且在父组件中引入以及注册

组件名格式说明

Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。这意味着一个以 MyComponent 为名注册的组件，在模板中可以通过 或 引用。这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。

components 显式注册

//组件名每个首字符大写；myTest为该vue文件名
import MyTest from myTest;
export default {
  components: {
  MyTest
  }
1
2
3
4
5
6

3. 子组件被引用与父事件监听

• **帕斯卡命名有组件使用方式 “-” 连接各部分字段
• ref引用该组件，在父界面按钮点击之后可以引用该子组件表单Form被打开
• @自定义事件名实现监听，同时绑定父组件相应子组件事件的事件**

<my-test ref="mytestRef" @success="refreshData"> </my-test >
1

4.父组件回调函数

refreshData(){
//刷新函数
}
1
2
3

5.按钮弹窗事件

vue的内置属性ref介绍

• 父界面查看你按钮监听事件
• 点击时传递数据行
• 按钮监听事件中
• • 子组件函数 init定义组件打开时数据初始化事件
• • refs内置属性,this关键字引用当该子组件被定义后添加ref属性如ref=“crud”
• • readonly $refs: { [key: string]: Vue | Element | (Vue | Element)[] | undefined };

---

• 子组件
• • init事件执行，弹窗可看，form可被编辑
• • 编辑完成确定返回到父组件
• • 执行success自定义事件

---

• 父组件
• • 监听到子组件事件
• • 执行响应子组件事件的父组件事件方法refreshData

<el-button type="text" icon="el-icon-view" size="mini"
 @click="detailView(row)"
 >查看
 el-button>
1
2
3
4

 detailView(row){
      this.$refs.mytesttRef.init(row,this.option.column)
    },

1
2
3
4
5