程序员经验分享-hwhale

vue 组件通信方式你知道几种，这6种一定得掌握

2023-11-12

第一种props
适用于的场景：父子组件通信
注意事项：
如果父组件给子组件传递数据（函数）：本质其实是子组件给父组件传递数据
如果父组件给子组件传递的数据（非函数）：本质就是父组件给子组件传递数据
书写方式：3种
["todos"],{type:Array},{type:Array,default:[]}
小提示：路由的props
书写形式：布尔值，对象，函数形式

第二种：自定义事件
适用于场景：子组件给父组件传递数据
$on 与$emit

第三种：全局事件总线 $bus
使用于场景：万能
Vue.prototype.$bus=this;

第四种：pubsub-js,在react框架中使用比较多，（发布与订阅）
适用于场景：万能

第五章：vuex
适用于场景：万能


第六种：插槽
适用于场景：父子组件通信---（一般结构）
默认插槽
具名插槽
作用域插槽

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

vue2

javascript

前端

vuejs

vue 组件通信方式你知道几种，这6种一定得掌握 的相关文章

随机推荐

  • Visual Studio容器工具要求在构建，调试或运行容器化项目之前运行Docker

    出现此提示 是因为电脑未安装Docker所致 接下来就教大家如何安装Docker 第一步 下载 地址 Install Docker Desktop on Windows Docker Documentation 第二步 安装 1 双击Doc

  • Unity InputSystem学习笔记（一）获取设备按键信息

    键盘 每帧判断 void Update if Keyboard current spaceKey wasPressedThisFrame print 空格键 if Keyboard current dKey wasReleasedThisF

  • qt中添加界面元素后，运行时看不到该界面元素

    问题 在一个qt工程的界面上添加了一个按钮 发现如下问题 这个按钮在代码里无法正确识别 IDE的智能提示里找不到 运行程序后 界面上也看不到该按钮 原因 在工程目录下和编译目录下同时出现ui mainwindow h文件 发生冲突 解决办法

  • React从入门到实战- 企业级实战项目-宜居一

    2019年最新 React从入门到实战 带 React 企业级实战项目 宜居 React基础知识 React基础知识 1 React 学习前期准备 React 学习前期准备 React 学习前期准备 react环境 工程化 webpack安

  • javascript跳转到新页面的三种方法

    1 a标签 a标签 a href http www jb51 net title 脚本之家 Welcome a a href 上一个页面 就是前一个页面 a href 下一个页面 就是后一个页面 a href http www jb51 n

  • 虚拟DOM详细说明

    一 什么是虚拟DOM 虚拟DOM是对真实DOM的抽象 虚拟DOM树是根据真实的DOM树模仿出来的 两者都是节点相同的同一种树形数据结构 一个应用页面一般是由多个元素节点组合嵌套构成的基本骨架 其中某一个节点变化改变都可能会导致连锁反应 如果

  • Android完全退出应用程序 ，太爽了

    return instance 退出栈顶Activity public void popActivity Activity activity if activity null 在从自定义集合中取出当前Activity时 也进行了Activi

  • 多线程测试（一）

    编写一个ThreadTest类 分别通过继承Thread类和实现Runnable接口 两种方式实现两个线程 两个线程执行的任务是实现同一个变量 count 的累加操作 count从1增加到10 每增加1 在控制台输出 执行累加操作的线程的线

  • epoll_create和epoll_create1

    名字 epoll create epoll create1 创建epoll文件描述符 摘要 include

  • 计算机体系结构基础知识介绍之简单回顾原码反码补码

    原码 最高位为符号位 0表示正数 1表示负数 例如 X 0b11 3 四比特表示原码 0011 3 X 0b11 3 四比特表示原码 1011 11 反码 最高位为符号位 0表示正数 1表示负数 正数的反码等于本身 负数的反码除符号位外 各

  • 蓝桥杯 分数

    1 1 1 2 1 4 1 8 1 16 每项是前一项的一半 如果一共有20项 求这个和是多少 结果用分数表示出来 类似 3 2 当然 这只是加了前2项而已 分子分母要求互质 程序说明 可以用等比数列的前n项和公式 也可以直接模拟来做 答案

  • tp5循环插入百万数据模块不存在:error

    话不多说 直接进正题 今天清洗数据过程中 发现每次插入到700多条就会出现这个错误 刚开始以为是请求时间有限制 修改了apipost的请求时间也不行 修改了apache的最大请求时间还是不行 1 修改php最大运行时间 修改php ini文

  • Redis分布式锁----乐观锁的实现，以秒杀系统为例

    摘要 本文使用redis来实现乐观锁 并以秒杀系统为实例来讲解整个过程 本文源码请在这里下载 https github com appleappleapple DistributeLearning 乐观锁 大多数是基于数据版本 versio

  • 微信小程序实现跳转到另外一个小程序的方法

    微信小程序实现跳转到另外一个小程序的方法 1 首先需要在当前小程序app json中定义 需要跳转的小程序的app id app josn navigateToMiniProgramAppIdList appid 第一种方法 wx navi

  • teamviewer quicksupport 插件(下载)

    teamviewer是一款远程控制软件 免费 比较好的 teamviewer quicksupport是一款支持手机可以被远程控制软件 需要下载插件 有对应手机品牌的插件 例如有HUAWEI LG等 电脑下载 teamviewer quic

  • 基于图像深度学习的无线电信号识别

    利用图像深度学习解决无线电信号识别问题的技术思路 首先把无线电信号具象化为一张二维图片 将无线电信号识别问题转化为图像识别领域的目标检测问题 进而充分利用人工智能在图像识别领域的先进成果 提高无线电信号识别的智能化水平和复杂电磁环境下的识别

  • C++的函数重载详解

    函数名相同 提高函数复用性 同一个作用域 下 函数名相同 参数的个数或类型或顺序不同 都可以作函数重载 注意 返回值类型不同不能作为函数重载 两个特殊情况 1 函数重载遇上引用与常量引用 void func int a void func

  • #pragma once和#ifndef的作用和区别

    两者共同的作用 防止库文件重复包含 ifndef define endif 方法一 在 h头文件开头加上 pragma once add h pragma once int ADD x y 方法二 在 h头文件加上预定义指令 add h i

  • Python-Anaconda最新安装图文教程

    Anaconda简介 Anaconda是一种数据科学和机器学习的开发环境 它包含了大量的Python包 工具和库 以及可视化界面和集成开发环境 Anaconda可以方便地管理Python环境和安装第三方软件包 同时也支持多个操作系统和平台

  • vue 组件通信方式你知道几种，这6种一定得掌握

    第一种props 适用于的场景 父子组件通信 注意事项 如果父组件给子组件传递数据 函数 本质其实是子组件给父组件传递数据 如果父组件给子组件传递的数据 非函数 本质就是父组件给子组件传递数据 书写方式 3种 todos type Arra

热门标签