【vue3】组件间通讯

news2024/11/19 16:32:36

1.上级传给下级

父级组件:

<ReqTab ref="crontabRef" @hide="openCron=false" @fill="crontabFill" :expression="expression" :method="method" ></ReqTab>

函数中赋值:

子组件:

const props = defineProps({
    hideComponent: {
        type: Array,
        default: () => [],
    },
    expression: {
        type: String,
        default: ""
    },
    method: {
      type: String,
      default: ""
  }
})

引用:props.expression

2.子组件更新数据到父组件

父组件:
<ReqTab ref="crontabRef" @hide="openCron=false" @fill="crontabFill" :expression="expression" :method="method" ></ReqTab>

注意:@fill="crontabFill"
/** 确定后回传值 */
function crontabFill(value) {
  formCase.value.request = value;
}

子组件:

const emit = defineEmits(['hide', 'fill'])
// 由子组件触发,更改表达式组成的字段值
function updateCrontabValue(value) {
  emit("fill", value)
}

3.监听器,作用:监控数据变化,无需按钮

<el-input type="textarea" v-model="nums" :autosize="{ minRows: 4, maxRows: 4}"/>
const emit = defineEmits(['update'])
watch(nums,(newValue,oldValue) => {
  console.log('newValue:',newValue);
  emit('update', newValue);
});

4.子组件数据传输:监听器监控数据变化后,把值传给update,update传给fill,fill更新最终的父组件数据:formCase.value.request

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

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

相关文章

IP协议(上)

目录 一、初步认识IP协议 二、认识IP地址 三、协议报头格式 1.报头和有效载荷分离 2.20字节的固定数据 四、网段划分 1.一个小例子 2.认识IP地址的划分 3.数据的传输过程 4.特殊的IP地址 5.通信运营商 &#xff08;1&#xff09;通信运营商的作用 &#xff08;2&a…

Unity可视化Shader工具ASE介绍——9、整理节点让复杂的Shader条理更清晰

阿赵的Unity可视化Shader工具ASE介绍目录 大家好&#xff0c;我是阿赵。   继续介绍Unity可视化Shader编辑工具ASE。上一篇介绍UI特效Shader的时候&#xff0c;连接了一个Shader 这个shader不是很复杂&#xff0c;但看起来也有点乱七八糟的。接下来通过对这个shader的节点连…

微信小程序设计之主体文件app-json-pages

一、新建一个项目 首先&#xff0c;下载微信小程序开发工具&#xff0c;具体下载方式可以参考文章《微信小程序开发者工具下载》。 然后&#xff0c;注册小程序账号&#xff0c;具体注册方法&#xff0c;可以参考文章《微信小程序个人账号申请和配置详细教程》。 在得到了测…

Linux生产者消费者模型

生产者消费者模型 生产者消费者模型生产者消费者模型的概念生产者消费者模型的特点生产者消费者模型优点 基于BlockingQueue的生产者消费者模型基于阻塞队列的生产者消费者模型模拟实现基于阻塞队列的生产消费模型 生产者消费者模型 生产者消费者模型的概念 生产者消费者模式就…

ChatGPT AIGC自动生成多条件复杂计算函数

在Excel中经常会遇到多条件判断,根据不同的条件与内容显示不同的值。 例如: 需要给每个员工根据入职年限,员工等级,满意度等维度给员工发年终奖。 这在职场办公过程中经常要面临的一个问题。如销售额达到多少,取多少提成,如学生成绩在什么区间是设置为优秀还是良好等一…

Windows开启telnet功能

打开控制面板&#xff0c;找到「程序和功能」&#xff0c;点击「启动或关闭Windows功能」 勾选「Telnet客户端」 点击确定&#xff0c;等待Windows完成设置。 然后就可以啦~ 今日金句&#xff1a; 煞笔给我退退退&#xff01;&#xff01;&#xff01;

ELK 单机安装

一丶软件下载 elasticsearch: https://www.elastic.co/downloads/past-releases kibana: https://www.elastic.co/downloads/past-releases 选择对应的版本的下载即可 二、es 安装es比较简单 rpm -ivh elasticsearch-2.4.2.rpm 修改配置文件 /etc/elasticsearch/elas…

基于SSM+Vue的体育馆管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

vue3插件开发,上传npm

创建插件 在vue3工程下&#xff0c;创建组件vue页: toolset.vue。并设置组件名称。注册全局组件。新建index.js文件。内容如下&#xff0c;可在main.js中引入index.js&#xff0c;注册该组件进行测试。![在这里插入图片描述](https://img-blog.csdnimg.cn/a3409d2cbeec41c797d5…

大数据Flink(九十九):SQL 函数的解析顺序和系统内置函数

文章目录 SQL 函数的解析顺序和系统内置函数 一、​​​​​​​SQL 函数

k8s kubernetes 1.23.6 + flannel公网环境安装

准备环境&#xff0c;必须是同一个云服务厂商&#xff0c;如&#xff1a;华为&#xff0c;阿里、腾讯等&#xff0c;不要存在跨平台安装K8S&#xff0c;跨平台安装需要处理网络隧道才能实现所有节点在一个网络集群中&#xff0c;这里推荐使用同一家云服务厂商安装即可 这里使用…

微信小程序实现类似于 vue中ref管理调用子组件函数的方式

微信小程序中确实有类似于 vue 中 ref管理子组件的方式、 这里 我给子组件定义了一个 class 只要是 css选择器拿得到的 都没什么问题 但你要保证唯一性 建议前端开发还是慎重一点 就算是不能重复也尽量用class 因为id总还是有风险的 然后 我在子组件中顶一个了一个函数 start…

AQS中lock源码解析

什么是AQS&#xff1f; 就是基于双向链表CAS实现的锁的一种机制或者方法思想。就是AbstractQueuedSynchronizer&#xff0c;是Java并发包下的一个基类基于AQS实现的同步器包括&#xff1a;ReentrantLock、CountDownLatch、Samaphone、FutureTask、ReentrantWriteLock Abstrac…

基于nodejs+vue云旅青城系统

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

Qt ModelViewDelegate(模型-视图-代理) 介绍和使用

一、Model (模型) 介绍 Qt Model 是 Qt 的一个重要组件&#xff0c;用于管理和展示数据。它是 Qt 的 Model/View 架构的核心部分&#xff0c;用于将数据模型与其视图相分离&#xff0c;实现数据的高效处理和可视化呈现。 Qt Model 可以理解成一组数据结构&#xff0c;其中包含…

Docker容器技术实战1

1、docker容器 docker相当于传统的货运集装箱 虚拟机&#xff08;Virtual Machine&#xff0c;VM&#xff09;是一个完整的虚拟操作系统和硬件环境。它的工作原理是通过在一台物理主机上使用虚拟化软件来创建多个虚拟机实例&#xff0c;每个实例都可以运行独立的操作系统和应用…

01-初识HTML和CSS

1.HTML与CSS 1.1.什么是HTML&#xff1f;什么是CSS&#xff1f; HTML是HyperText Markup Language(超文本标记语言) ​ 它不是一种编程语言&#xff0c;而是一种标记语言&#xff0c;用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者…

扬帆起航:许战海方法论日文版正式发布

近日&#xff0c;中国头部战略咨询机构‘许战海咨询’最新研究成果《中国汽车行业新能源转型战略》行业白皮书日文版&#xff0c;即将在日本发布。同时发布的日文版核心方法论白皮书还有《主品牌进化战略》、《第二招牌增长战略》、《链主品牌&#xff1a;制造业的竞争之王》等…

Python特征分析重要性的常用方法

前言 特征重要性分析用于了解每个特征(变量或输入)对于做出预测的有用性或价值。目标是确定对模型输出影响最大的最重要的特征&#xff0c;它是机器学习中经常使用的一种方法。 为什么特征重要性分析很重要? 如果有一个包含数十个甚至数百个特征的数据集&#xff0c;每个特征…

C++中多态的原理【精华】

虚函数表 通过一道题我们先感受一下编译器针对多态的处理 #include <iostream> using namespace std;class Base { public:virtual void Func1(){cout << "Func1()" << endl;} private:int _b 1;char _c };int main() {cout << sizeof(B…