c# asp.net网站开发书,网络营销主要做些什么,wordpress is home,网站制作q文章目录 需求弹窗关闭之后父界面刷新展示最新数据 实现方案AVUE 大文本默认展开slotVUE 自定义事件实现 父界面刷新那么如何用呢? 思路核心代码1. 事件定义2. 帕斯卡命名组件且在父组件中引入以及注册3. 子组件被引用与父事件监听4.父组件回调函数 5.按钮弹窗事件 需求
弹窗… 文章目录 需求弹窗关闭之后父界面刷新展示最新数据 实现方案AVUE 大文本默认展开slotVUE 自定义事件实现 父界面刷新那么如何用呢? 思路核心代码1. 事件定义2. 帕斯卡命名组件且在父组件中引入以及注册3. 子组件被引用与父事件监听4.父组件回调函数 5.按钮弹窗事件 需求
弹窗关闭之后父界面刷新展示最新数据 业务字段较多甲方要求增加新页面展示数据且默认展开所有数据行。因框架已有不适用默认文本数据较长tooltip展示且有些字段slot格式复杂不支持框架view页面展示。故开发新页面可查看可编辑。 效果图如下 F页面C子页面
实现方案
子页面作为Dialog整体引入父页面。子组件大文本添加slot 设置type属性为文本且不设置最大展开行
AVUE 大文本默认展开slot template slotimprovementMeasuresel-inputv-modelform.improvementMeasures:disabledfalsetypetextarea:autosize{ minRows: 4 }/el-input/templateVUE 自定义事件实现 父界面刷新
vue组件事件 在组件的模板表达式中可以直接使用 $emit 方法触发自定义事件 父组件可以通过 v-on (缩写为 ) 来监听事件 那么如何用呢?
去源码看看 vue.d.ts开发包源码部分 如下 可以看到VUE 通过关键字this可以引用很多内置方法
export interface Vue {readonly $el: Element;readonly $options: ComponentOptionsVue;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: Recordstring, any;readonly $props: Recordstring, any;readonly $ssrContext: any;readonly $vnode: VNode;readonly $attrs: Recordstring, string;readonly $listeners: Recordstring, 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);$watchT(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(): Promisevoid;$createElement: CreateElement;
}思路
1. 定义新页面 子组件 2. 自定义事件$emit 3. 父页面 父组件 引入 4. 组件注册 5. 使用子组件 监听事件 6. 执行监听函数
核心代码
1. 事件定义
//事件名称 事件参数
$emit(event: string, ...args: any[]): this;弹窗确认关闭函数内this关键字自定义事件success
confirmSave(){//other things;this.$emit(success);//done();
}2. 帕斯卡命名组件且在父组件中引入以及注册
组件名格式说明 Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。这意味着一个以 MyComponent 为名注册的组件在模板中可以通过 或 引用。这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。 components 显式注册
//组件名每个首字符大写myTest为该vue文件名
import MyTest from myTest;
export default {components: {MyTest}3. 子组件被引用与父事件监听
**帕斯卡命名有组件使用方式 “-” 连接各部分字段ref引用该组件在父界面按钮点击之后可以引用该子组件表单Form被打开自定义事件名实现监听同时绑定父组件相应子组件事件的事件**
my-test refmytestRef successrefreshData /my-test 4.父组件回调函数
refreshData(){
//刷新函数
}5.按钮弹窗事件
vue的内置属性ref介绍
父界面查看你按钮监听事件点击时传递数据行按钮监听事件中 子组件函数 init定义组件打开时数据初始化事件 refs内置属性,this关键字引用当该子组件被定义后添加ref属性如ref“crud” readonly $refs: { [key: string]: Vue | Element | (Vue | Element)[] | undefined }; 子组件 init事件执行弹窗可看form可被编辑 编辑完成确定返回到父组件 执行success自定义事件 父组件 监听到子组件事件 执行响应子组件事件的父组件事件方法refreshData
el-button typetext iconel-icon-view sizeminiclickdetailView(row)查看/el-buttondetailView(row){this.$refs.mytesttRef.init(row,this.option.column)},
