vue3 父子组件传值 记录

2023-11-10

最近这个组件之间传值用的较多,我这该死的记性,总给忘记写法,特此记录下

在这里插入图片描述

第一种 父传子

补充:LeftView.vue 是父组件; Video.vue 是子组件
在这里插入图片描述
在这里插入图片描述

第二种 子传父

Video.vue 子组件

第一步 引入:
import { defineEmits } from 'vue'

第二步 命名:
const emit = defineEmits(['func'])

第三步 传递:
emit('func', value)

LeftView.vue 父组件
在这里插入图片描述

第三种 组件通用传值EventBus

第一步 创建bus.js文件

--bus.js

import mitt from "mitt";
const emitter = mitt()
export default emitter

第二步 分别在需要相互传参的组件中引入bus.js文件,并相互传参
在这里插入图片描述
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue3 父子组件传值 记录 的相关文章

随机推荐

  • 用pm2在本地部署服务器node项目,全栈实用技能,pm2部署node应用到服务器

    好东西就要拿来分享 不管你的目标是前端还是全栈 都值得一看 背景介绍 一般的 我们开发一个前端项目通常是在本地通过Node js搭一个服务器 所有的开发测试过程基本上都是在本地搞定 有时候 我们需要把我们的作品上线 好让更多的人能够访问到
  • 某网站hexin-v的解决方法,hexin-v的解密方法,hexin-v的生成方法

    前段时间做的项目 一直运行比较稳定 最近几天运行过程中异常退出 结果发现是某网站接口有变 使用谷歌chrome 对原网站进行调试 结果发现某个js页面有变化 以原有的hexin v生成方法 已经不能适用于最新的算法 本想偷偷懒从网络上找一下
  • Map和Set

    Map和Set是集合中的两个接口 Set实现了Collection接口 而Map没有实现 Map下面又有很多子类 我们主要研究HashMap和TreeMap Set同样有很多子类 主要研究HashSet和TreeSet 在理解掌握它们之前
  • FTP命令使用实例

    ftp命令是标准的文件传输协议的用户接口 ftp是在TCP IP网络上的计算机之间传输文件的简单有效的方法 它允许用户传输ASCII文件和二进制文件 在ftp会话过程中 用户可以通过使用ftp客户程序连接到另一台计算机上 从此 用户可以在目
  • LR.net敏捷软件开发平台核心功能详解

    软件开发 程序员就是不断地跟变量 方法 类 接口这些东西打交道 随着开发经验的积累 很多程序员会发现 虽然最终开发出来的软件每个都不一样 但是在开发过程中用到的很多东西却又是相通的 例如 每个软件的底层差不多都需要进行增删改查 文件操作 权
  • State 模式

    有限状态机 FSM Finite state machine 例子 1 若状态机在Locked状态收到了一个coin事件 则迁移到Unlocked状态并执行unlock动作 2 若状态机在UnLocked状态收到了一个pass事件 则迁移到
  • 基于Spark MLlib平台的协同过滤算法---电影推荐系统

    说到推荐系统 大家可能立马会想到协同过滤算法 本文基于Spark MLlib平台实现一个向用户推荐电影的简单应用 其中 主要包括三部分内容 协同过滤算法概述 基于模型的协同过滤应用 电影推荐 实时推荐架构分析 一 协同过滤算法概述 本人对算
  • npm安装Electron解决方案

    npm安装Electron解决方案 Electron使用npm安装时 因为是国外的镜像源 所以速度会非常慢 而使用cnpm如下命令进行安装时 又会出现安装失败的问题 npm install electron g execute post i
  • 第一阶段-第四章 Python的循环语句

    目录 前言 1 循环语句的运行方式 2 为什么要学习循环语句 3 本章的安排 一 while循环的基础语法 1 学习目标 2 while循环语句 3 本节的演示 4 while循环的注意点 5 本小节的总结 6 课后练习 二 while循环
  • 【JavaEE初阶】第三节.多线程基础篇

    作者简介 大家好 我是未央 博客首页 未央 303 系列专栏 JavaEE初阶 每日一句 人的一生 可以有所作为的时机只有一次 那就是现在 目录 文章目录 前言 一 认识线程 二 多线程程序 2 1 第一个Java多线程程序 2 2 怎么样
  • 6.1 什么是面向对象以及类和对象的区别

    什么是面向对象 面向对象 面向对象编程的简称 Object Oriented Programming OOP 是一种对现实世界理解和抽象的方法 是计算机编程技术发展到一定阶段后的产物 早期的计算机编程是面向过程的 典型的代表是 C 语言 解
  • Redis数据类型及编码格式——Hash篇

    写在前面 以下的知识都是建立在目前线上稳定版6 2 6版本的 而目前github上的redis源代码又更新优化了许多 譬如 hash数据类型默认的编码格式已经被替换为listpack hashtable数据结构也被重新优化 哈希表对象dic
  • python/matlibplot绘制多条曲线图

    这里我利用的是matplotlib pyplot plot的工具来绘制折线图 这里先给出一个段代码和结果图 coding UTF 8 import numpy as np import matplotlib as mpl import ma
  • 动态添加“<input onclick=“‘+json+‘“>“元素传参时不识别json的bug问题解决

    问题描述 var json a 1 在html中使用js方法动态添加
  • Vim快捷键 - Vim Cheat Sheet

    请访问 https vim rtorr com lang zh cn 全局 h elp 关键字 打开关键字帮助 sav eas 文件名 另存为 clo se 关闭当前窗口 ter minal 打开一个shell窗口 K 打开光标所在单词的m
  • nfs文件服务器错误码5,使用5.4内核最新代码后作为nfs服务器只能列出共享的文件夹名称,点进去不能显示内容...

    反馈bug 问题模板 提建议请删除 1 关于你要提交的问题 Q 是否搜索了issue 使用 x 选择 没有类似的issue 2 详细叙述 1 具体问题 A 使用5 4内核最新代码后作为nfs服务器只能列出如 mnt sda3的共享的文件夹名
  • 【hortonworks/registry】诡异问题之启动了却无法访问

    1 背景 本地mac启动了registry 但是却无法访问页面 lcc lcc soft registry hortonworks registry 0 9 0 bin registry start lcc lcc
  • osgEarth的Rex引擎原理分析(一二八)rex的引擎和图层投影及其关系

    目标 一二七 中问题214 主要存在三个地方 一是map的type属性 可取两个值geocentric projected 前者用于三维显示 后者用于二维显示 二是map的options属性的srs 可以取spherical mercato
  • 用户复购行为预测--数据挖掘分析案例(天池/python)

    阿里天池新人赛中的一个 记录分享 Repeat Buyers Prediction Challenge the Baseline 天池大赛 阿里云天池 第一次提交 8简单特征 随机森林模型 score 0 5507327 排名 278 第二
  • vue3 父子组件传值 记录

    最近这个组件之间传值用的较多 我这该死的记性 总给忘记写法 特此记录下 第一种 父传子 补充 LeftView vue 是父组件 Video vue 是子组件 第二种 子传父 Video vue 子组件 第一步 引入 import defi