uni-app 组件传值

uni-app中的组件之间的传值

在这里插入图片描述
我们将compontents中的test文件作为子组件 引入到index中使用
在这里插入图片描述
引入并使用
在这里插入图片描述
效果如下
在这里插入图片描述

父传子

  • 首先我们在父组件中使用子组件的标签中去自定义title
    在这里插入图片描述

  • 在子组件中 通过props去接收并处理
    在这里插入图片描述
    效果如下：
    在这里插入图片描述

子传父

子组件中
在这里插入图片描述

  • 设置一个按钮 并注册点击事件
  • 在点击事件中我们通过$emit 方法调用自定义事件 参数一为自定义事件名称 参数二为传递的参数 在这里就是data数据中定义的name

父组件中
在这里插入图片描述

  • 在使用子组件的上面去定义一个自定义事件并绑定函数
  • 在函数中去接收参数并赋值给data中的name
  • 渲染页面

效果如下：
在这里插入图片描述
点击按钮后
在这里插入图片描述

非父子组件传值

在这里插入图片描述
我们定义aa和bb两个组件并且同时引入index中
在这里插入图片描述
aa组件
在这里插入图片描述
bb组件
在这里插入图片描述

效果如下：
在这里插入图片描述
要求点击aa组件中的按钮 将bb组件中的666改为999

bb组件中
在这里插入图片描述

  • 我们在b组件中定义一个全局的自定义事件,自定義事件要定义在created中 其他组件才能获取到
  • 通过nui.$on 第一个参数为自定义事件名 第二个参数为 被触发的函数

aa组件中
在这里插入图片描述

  • 我们通过为按钮注册点击事件
  • 在事件中通过uni.$emit触发全局的自定义事件updateNum并传递参数

效果如下：
在这里插入图片描述
点击后
在这里插入图片描述

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

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

相关文章

Docker 图形界面管理工具 -- Portainer

Docker 图形界面管理工具 -- Portainer

Portainer（基于 Go）是一个轻量级的管理界面，可让您轻松管理Docker主机或Swarm集群。 Portainer的使用意图是简单部署。它包含可以在任何 Docker 引擎上运行的单个容器（Docker for Linux 和 Docker for Windows）。 Port…
阅读更多...
vue cli3.0创项目报错‘This may cause things to work incorrectly. Make sure to use the same version for b’

vue cli3.0创项目报错‘This may cause things to work incorrectly. Make sure to use the same version for b’

错误： throw new Error(^Error:Vue packages version mismatch:- vue2.6.12 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue\dist\vue.runtime.common.js) - vue-template-compiler2.6.11 (C:\Users\Administrator\AppData\Roaming\npm\node_module…
阅读更多...
Web程序中使用EasyUI时乱码问题

Web程序中使用EasyUI时乱码问题

今天偶然遇见使用easyUI时，弹窗和分页都是乱码的问题，耗费了很长的时间来解决，以此记住这个坑。 相信大家都会在使用easyUI时都会设置这样一句： 那么就有可能出现设置中文后的乱码问题，如下图： 因为在使用e…
阅读更多...
160-PHP 文本替换函数str_replace（一）

160-PHP 文本替换函数str_replace（一）

<?php$strHello world!; //定义源字符串$searcho; //定义将被替换的字符$replaceO; //定义替换的字符串$resstr_replace($search,$replace,$str); //使用函数处理字符串echo "{$str}替换后的效果为&#xff1a;<br />{$res}";…
阅读更多...
看完就懂的编辑页面如何巧妙处理时间

看完就懂的编辑页面如何巧妙处理时间

需求分析 分析&#xff1a; 我们通常会遇到这种情况&#xff0c;当我们制作一个表单页面的时候&#xff0c;通常会有添加和编辑的情况&#xff0c;我们在提交的时候还需要将时间的格式转换为字符串格式进行传参。 在这里我们使用的是 iview 中的 DatePicker type格式为datetime…
阅读更多...
关于“wap2app仅支持对已通过ICP备案的域名站点进行打包”问题解决

关于“wap2app仅支持对已通过ICP备案的域名站点进行打包”问题解决

关于“wap2app仅支持对已通过ICP备案的域名站点进行打包”问题解决 如果我们是通过Vue技术写的移动端&#xff0c;开发完成后我们的项目需要放到服务器上&#xff0c;然后我们在将服务器上面的项目打包apk格式 wap2app将网页打包成apk步骤 使用HbuilderX创建一下wap2app项目 我…
阅读更多...
mysql之库操作_创建用户_修改用户权限_修改用户密码

mysql之库操作_创建用户_修改用户权限_修改用户密码

用户操作&#xff1a; 1、create user Faye127.0.0.1IDENTIFIED BY 123 #添加一个用户名字为Faye的用户,127.0.0.1为本机的ip,123为密码 补&#xff1a;create user Faye% IDENTIFIED BY 123 #添加一个用户名字为Faye的用户,‘%’的意思为所有人都可以连接Faye这个用户,123为…
阅读更多...
前端导出文件，后端返回文件流过大直接干崩溃

前端导出文件，后端返回文件流过大直接干崩溃

前端导出文件 前端很常见的导出需求 导出world xlsx 甚至是zip 在我这个项目中是导出图片&#xff0c;图片量还是蛮大的&#xff0c;直接干崩溃了 我们这里是后端同学直接返回的是文件流 通过调用接口拿到文件流后直接调用下面的方法 export function exportZip(res, name)…
阅读更多...
Vue和iview-admin搭建的项目进行兼容

Vue和iview-admin搭建的项目进行兼容

写在前面&#xff1a; 用iview-admin创建的基于Vue的项目&#xff0c;开发完成后&#xff0c;用户是使用的360浏览器&#xff0c;其中有两个模式&#xff0c;一个是极速模式&#xff08;谷歌内核&#xff09;&#xff0c;一个是兼容模式&#xff08;IE内核&#xff09;&#x…
阅读更多...
Vue 打包后打开为空白页面 并且控制台报错‘Failed to load resource: net::ERR_FILE_NOT_FOUND’

Vue 打包后打开为空白页面 并且控制台报错‘Failed to load resource: net::ERR_FILE_NOT_FOUND’

问题描述 当我们开发完成后进行 npm run build打包后形成dist文件 我们通过访问dist文件中的index&#xff0c;会出现空白页面什么都不显示的问题&#xff0c;控制台中还会报‘Failed to load resource: net::ERR_FILE_NOT_FOUND’错误&#xff0c;其实是因为打包后的dist目录…
阅读更多...
引用Nuget包Microsoft.EntityFrameworkCore.Tools.DotNet报错

引用Nuget包Microsoft.EntityFrameworkCore.Tools.DotNet报错

错误如下 解决方法 使用VS2017或更高版本在改项目右键&#xff0c;选择“编辑xxx.csproj”&#xff0c;并添加如下一句话&#xff0c;就可以成功引用改Nuget包 <PackageReference Include"Microsoft.EntityFrameworkCore.Tools.DotNet" Version"2.0.3"/…
阅读更多...
echarts 折线图 多条折线数据相同时展示的图形并没有重合

echarts 折线图 多条折线数据相同时展示的图形并没有重合

简单粗暴的使用echarts官网展示用例 我讲series中的几个对象中的值都改成了相同的 看到数值相同 图表中却没有重合 后面发现解决办法如下 只需要将对象中的stack属性删除就可以了&#xff0c;不仅仅针对这个问题 有时候我们发现图表展示的数据跟y周的值有差距时可以试试这个…
阅读更多...
Django，ajax实现表格增删查改，Django内置分页功能。

Django，ajax实现表格增删查改，Django内置分页功能。

1.工程目录 2.urls.py """Django_ajax URL ConfigurationThe urlpatterns list routes URLs to views. For more information please see:https://docs.djangoproject.com/en/2.1/topics/http/urls/ Examples: Function views1. Add an import: from my_app im…
阅读更多...
前端登录逻辑

前端登录逻辑

话不多说直接上图片&#xff0c;纯手工打造
阅读更多...
echarts 多次通过setOption改变图形数据时 数据有时不进行变化

echarts 多次通过setOption改变图形数据时 数据有时不进行变化

需求&#xff1a;通过切换xyz三个选项&#xff0c;进行切换统计图中的折线条数 当前数据为正确&#xff0c;页面加载默认选中x轴&#xff0c;当选中xy后也没有问题 当我取消y轴时 发现图表并没有进行变化 但是option中的数据确实已经刷新了&#xff0c;猜测是在setOption时候…
阅读更多...
2019春总结作业

2019春总结作业

2019春总结作业 一丶我学到的内容 &#xff08;整理本课程所学&#xff0c;用思维导图的方式,思维导图的工具可以使用&#xff1a;XMind&#xff09; 二丶我的收获&#xff08;包括我完成的所有作业的链接收获&#xff09; 在这个星期里&#xff0c;我们专业的学生在专业老师的…
阅读更多...
【数据结构入门精讲 | 第十七篇】一文讲清图及各类图算法

【数据结构入门精讲 | 第十七篇】一文讲清图及各类图算法

在上一篇中我们进行了的并查集相关练习&#xff0c;在这一篇中我们将学习图的知识点。 目录 概念深度优先DFS伪代码 广度优先BFS伪代码 最短路径算法&#xff08;Dijkstra&#xff09;伪代码 Floyd算法拓扑排序逆拓扑排序 概念 下面介绍几种在对图操作时常用的算法。 深度优先D…
阅读更多...
安装一个插件、回馈给你一款属于猿的绚丽浏览器

安装一个插件、回馈给你一款属于猿的绚丽浏览器

不知道大家有没有了解&#xff0c;由CSDN推出的一款CSDN浏览器助手&#xff0c;其实哈就我个人而言对一些助手、插件还是很有兴趣的&#xff0c;毕竟他能够让我们快速高效的去完成我们的操作。但是一直没有找到一款称心如意的&#xff0c;知道遇见了这款CSDN浏览器助手让我爱不…
阅读更多...
《看完它面试必solo | 寻找C站宝藏》

《看完它面试必solo | 寻找C站宝藏》

今天给大家搂点干货&#xff0c;2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本。到目前已经很多公司开始鼓励大家去学习Vue3了&#xff0c;在这里小编就把自己所了解到的‘皮毛’贡献给大家 Vue3.0 的突出亮点 Performance&#xff1a;性能比Vue2快1.2~2倍Tree shaking s…
阅读更多...
KVC/KVO 本质

KVC/KVO 本质

KVO 的实现原理 KVO是关于runtime机制实现的当某个类的对象属性第一次被观察时&#xff0c;系统就会在运行期动态地创建该类的一个派生类&#xff0c;在这个派生类中重写基类中任何被观察属性的setter方法。派生类在被重写的setter方法内实现真正的通知机制如果原类为Person&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023