vue2混入声明组件、交互流程

vue2中可以使用混入,在当前页面中将混入中声明的组件进行注入

写法

父组件声明混入文件:

import mixComponent from "@/mixins/mixComponent"
export default {mixins:[mixComponent]
}

mixComponent文件定义方式,类似于一个vue文件的script区域
我的场景是这样的,在父组件使用混入,混入了一个文件,这个混入内又引用了两个组件,GenerateComponent组件是一个按钮,点击按钮后,生成文件,传给组件:FileListComponent让文件列表展示出来,其中涉及到混入文件中如何跟引入的组件进行交互:组件内使用value接收混入混入文件内传递的数据

const mixins = {data() {generateParams: {taskId: Number},FileListObj: {FileList: [],}},// 此处声明了两个属性,第一个属性是一个按钮组件,第二个属性是一个文件列表的组件,用于展示点击按钮后生成的文件列表computed: {generateBtn() {const generateBtn = {column: [{prop: 'generateProp',component: 'GenerateComponent',display: true,span: 2},{prop: 'fileListProp',component: 'FileListComponent',label: '文件',display: true,span: 24}]}return courtAuthChangeBtn;}},watch: {'form.taskId'(newVal, oldVal) {console.log("监听到taskId发生变动")this.generateParams.taskId = newVal;}},	methods: {updateFileList(newFileList) {console.log("此方法用来改变文件列表组件的value值,达到动态展示文件列表的目的")this.FileListObj.fileList = newFileListthis.form.fileListProp = this.FileListObj}}}
export default mixins;

组件GenerateComponent定义如下:

<template><div><el-button class="btn-class" :disabled="displayFlag" type="text" size="medium" @click="generateFile">生成文件</el-button></div>
</template>
<script>
// 这是后台接口
import {generateFile} from "@/api/tasks/opencourt";
export default {name: "GenerateComponent",props: {value: {taskId: Number}},data() {return {displayFlag: false}},methods: {generateFile() {// 生成文件generateFile(this.value).then(res => {console.log("文件返回: ", res)// 重要:这里这行是关键,是此组件的文件列表展示到文件列表组件上this.$root.updateFileList(res.data.data)})},calDisplay() {// 计算按钮是否可点击}}
}</script>

组件FileListComponent如下:

<template>
<div><avue-crud :option="fileListOption":data="value.fileList"><template slot='filename' slot-scope="{row,index}"><span v-if="row!==undefined && row.url  && row.url.length>=1"><a style="color: #409EFF;cursor: pointer" @click="filePreview(row.url)">{{ row.filename }}</a></span></template></avue-crud>
</div>
</template>export default {name: "FileListComponent",props: {value: {fileList: []},},}

这里的FileListComponent主要用来展示文件列表;

这里主要表达了,混入文件引入两个组件,如何让这两个组件进行交互,可以在混入文件中定义影响组件数据的方法,然后在组件中使用this.$root.updateFileList(res.data.data) 来调用混入文件中定义的这个方法达到数据交互目的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/666919.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自学网安-IIS服务器

部署环境&#xff1a;win2003 配置环境&#xff1a;winxp ip&#xff1a;10.1.1.2 win2003 ip&#xff1a;10.1.1.1 开始安装 双击“应用程序服务器” 双击“Internet 信息服务&#xff08;IIS&#xff09;” 勾选万维网服务&#xff0c;确定然后下一步 查看端口号;netstat …

ConcurrentHashMap的使用以及源码分析

一、ConcurrentHashMap&#xff1f; 1.1 存储结构 ConcurrentHashMap是线程安全的HashMap ConcurrentHashMap在JDK1.8中是以CASsynchronized实现的线程安全 CAS&#xff1a;在没有hash冲突时&#xff08;Node要放在数组上时&#xff09; synchronized&#xff1a;在出现ha…

Java 日期时间相互转换 格式化输出

Java 日期时间相互转换 格式化输出 package com.zhong.time;import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date;public class SimpleDateFormatTest {public static void main(String[] args) throws ParseException {Date date n…

impala与kudu进行集成

文章目录 概要Kudu与Impala整合配置Impala内部表Impala外部表Impala sql操作kuduImpala jdbc操作表如果使用了Hadoop 使用了Kerberos认证&#xff0c;可使用如下方式进行连接。 概要 Impala是一个开源的高效率的SQL查询引擎&#xff0c;用于查询存储在Hadoop分布式文件系统&am…

设计模式1-访问者模式

访问者模式是一种行为设计模式&#xff0c;它允许你定义在对象结构中的元素上进行操作的新操作&#xff0c;而无需修改这些元素的类。这种模式的主要思想是将算法与元素的结构分离开&#xff0c;使得可以在不修改元素结构的情况下定义新的操作。 所谓算法与元素结构分离&#x…

极速上手:使用Jmeter轻松实现N种参数化

参数化的方式&#xff1a; 一、使用用户自定义变量 一种方式&#xff1a;直接在测试计划中添加用户自定义变量 另外一种方式&#xff1a;配置元件——用户自定义变量 示例&#xff1a;用户自定义变量&#xff0c;登录手机号码 在接口请求的时候&#xff0c;进行引用 请求之后&…

32ADC模数转换器&AD单通道&多通道

目录 一.简介 二.逐次逼近法​编辑 三.结构框图 四.小tips (1)转换模式 &#xff08;2&#xff09;触发控制 &#xff08;3&#xff09;数据对齐 &#xff08;4&#xff09;转换时间 &#xff08;5&#xff09;校准 &#xff08;6&#xff09;硬件电路 五.相关函数 …

vue使用es的reduce方法编译报错Error: Can‘t resolve ‘core-js/modules/es.array.reduce.js‘

哈喽 大家好啊 最近在vue使用es的reduce方法编译报错Error: Cant resolve core-js/modules/es.array.reduce.js 报错如图所示&#xff1a; 解决方案&#xff1a; npm install --save core-js 然后重新编译下将正常了 参考原文: 使用import异步加载语法报错_module not foun…

Android Split APK介绍

文章目录 Split APKSplit APK 详细介绍概念Android App Bundle&#xff08;AAB&#xff09;Split APK 的优势动态分发减小安装包大小模块化和渠道分发 Split APK 的类型基于屏幕密度### 基于 CPU 架构基于语言 实现 Split APK Split APK Split APK 是 Android 中一种应用程序安…

SpringBoot实战第二天

今日战报 继续完善用户相关接口开发&#xff1a; 1.完成获取用户信息功能 2.完成更新用户信息功能 3.完成更新用户头像功能 4.完成更新用户密码功能 获取用户信息 接口文档 如接口文档所示&#xff0c;我们需要做的就是从header中的Authorization中读取token&#xff0c;解码…

问题:测风站应设置在平直的巷道中,其前后()范围内不得有障碍物和拐弯等局部阻力。 #微信#媒体

问题&#xff1a;测风站应设置在平直的巷道中&#xff0c;其前后&#xff08;&#xff09;范围内不得有障碍物和拐弯等局部阻力。 参考答案如图所示

stable-diffusion | v1-5-pruned.ckpt和v1-5-pruned-emaonly.ckpt的区别

https://github.com/runwayml/stable-diffusion?tabreadme-ov-file#reference-sampling-script 对于 1.5 模型&#xff0c;其中可能包括四部分&#xff1a;标准模型、文本编码器、VAE模型、EMA模型。 标准模型&#xff1a;生成图片的核心模块&#xff0c;潜空间中的前向扩散和…

C语言中那些后知后觉的细节冷知识(二)typedef、死循环、位移、内存访问

系列文章目录 C语言中那些后知后觉的细节冷知识&#xff08;一&#xff09;static、const、volatile、数组、宏 C语言中那些后知后觉的细节冷知识&#xff08;二&#xff09;typedef、死循环、位移、内存访问 持续更新中… … 文章目录 系列文章目录前言一、typedef二、死循环…

Qt之漂亮的地球

这个画的是一个东西围绕着中心的地球不停的旋转&#xff0c;可以放在界面的中部&#xff0c;增加美感。 展示 界面展示 设计过程 标题在之前的博客有写过&#xff0c;这里不再重复 下面是关于地球旋转的相关 1.资源文件添加 先将相关的资源文件添加&#xff0c;三个图片 2…

【lesson32】MySQL用户管理

文章目录 用户管理介绍用户用户信息创建用户 删除用户修改用户密码数据库的权限给用户授权回收权限 用户管理介绍 用户 用户信息 MySQL中的用户&#xff0c;都存储在系统数据库mysql的user表中 //操作语法 mysql> use mysql; Database changed mysql> select host,use…

微信小程序封装wx.request以及小程序登录

1.封装wx.request const GET GET; const POST POST; const PUT PUT; const FORM FORM; const DELETE DELETE;const baseURL https://alimini.ck9696.com/wxmall; // const baseURL http://192.168.0.17:8601/wxmall; var app getApp(); function request(method, url…

VR全景技术可以应用在哪些行业,VR全景技术有哪些优势

引言&#xff1a; VR全景技术&#xff08;Virtual Reality Panorama Technology&#xff09;是一种以虚拟现实技术为基础&#xff0c;通过360度全景影像、立体声音、交互元素等手段&#xff0c;创造出沉浸式的虚拟现实环境。该技术不仅在娱乐领域有着广泛应用&#xff0c;还可…

ABAC模型简单介绍——通过casbin进行简单举例

ABAC模型简单介绍——通过casbin进行简单举例 文章目录 ABAC模型简单介绍——通过casbin进行简单举例定义相关术语Casbin实现ABAC&#xff08;Python版&#xff09;假设情境定义对象定义静态模型模板测试代码最终结果 相关链接 定义 Attribute Based Access Control (基于属性…

Git使用命令大全

命令大全参考阮一峰的博客&#xff0c;根据自己的使用习惯作了调整。 Git常用命令 其他常用的命令 配置Git # 显示当前的Git配置 $ git config --list# 编辑Git配置文件 $ git config -e [--global]# 设置提交代码时的用户信息 $ git config [--global] user.name "[nam…

第14章_视图

第14章_视图 1.常见的数据库对象 对象描述表(TABLE)表是存储数据的逻辑单元&#xff0c;以行和列的形式存在&#xff0c;列就是字段&#xff0c;行就是记录数据字典就是系统表&#xff0c;存放数据库相关信息的表。系统表的数据通常由数据库系统维护&#xff0c; 程序员通常不…