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.tpcf.cn/news/248719.html

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

相关文章

JSP XML数据处理

JSP XML数据处理

JSP XML数据处理 当通过HTTP发送XML数据时，就有必要使用JSP来处理传入和流出的XML文档了，比如RSS文档。作为一个XML文档，它仅仅只是一堆文本而已，使用JSP创建XML文档并不比创建一个HTML文档难。 使用JSP发送XML 使用JSP发送XML内容…
阅读更多...
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…
阅读更多...
关于window对象

关于window对象

window对象 - navigator（导航器对象） appCodeName：返回浏览器的代码名appName：返回浏览器的名称appVersion：返回浏览器的平台和版本信息cookieEnabled：返回指明浏览器中是否禁用cookie的布尔值platform&a…
阅读更多...
160-PHP 文本替换函数str_replace（一）

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

<?php$strHello world!; //定义源字符串$searcho; //定义将被替换的字符$replaceO; //定义替换的字符串$resstr_replace($search,$replace,$str); //使用函数处理字符串echo "{$str}替换后的效果为&#xff1a;<br />{$res}";…
阅读更多...
流的操作规律

流的操作规律

IO流中对象很多&#xff0c;解决问题(处理设备上的数据时)到底该用哪个对象呢&#xff1f;　　 把IO流进行了规律的总结(四个明确)&#xff1a; 明确一&#xff1a;要操作的数据是数据源还是数据目的。 源&#xff1a;InputStream Reader 目的&#xff1a;OutputStream Writ…
阅读更多...
看完就懂的编辑页面如何巧妙处理时间

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

需求分析 分析&#xff1a; 我们通常会遇到这种情况&#xff0c;当我们制作一个表单页面的时候&#xff0c;通常会有添加和编辑的情况&#xff0c;我们在提交的时候还需要将时间的格式转换为字符串格式进行传参。 在这里我们使用的是 iview 中的 DatePicker type格式为datetime…
阅读更多...
[转]Tomcat中8005/8009/8080/8443端口的作用

[转]Tomcat中8005/8009/8080/8443端口的作用

8005&#xff1a;关闭tomcat进程所用。当执行shutdown.sh关闭tomcat时就是连接8005端口执行“SHUTDOWN”命令--由此&#xff0c;我们直接telnet8005端口执行“SHUTDOWN”&#xff08;要大写&#xff0c;小写没用&#xff1b;不运只能telnet 127.0.0.1 8005其他地址telnet都不能…
阅读更多...
月入10万和月入5千的人关键区别是什么？？？

月入10万和月入5千的人关键区别是什么？？？

月入10万和月入5千的人关键区别是什么&#xff1f;&#xff1f;&#xff1f;知识体系、决策能力、魄力和格局&#xff01;&#xff01;&#xff01;人不学不知道&#xff0c;看过很多书&#xff0c;学过很多课&#xff0c;发现不久就忘了&#xff0c;很难真正被自己消化吸收&am…
阅读更多...
关于“wap2app仅支持对已通过ICP备案的域名站点进行打包”问题解决

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

关于“wap2app仅支持对已通过ICP备案的域名站点进行打包”问题解决 如果我们是通过Vue技术写的移动端&#xff0c;开发完成后我们的项目需要放到服务器上&#xff0c;然后我们在将服务器上面的项目打包apk格式 wap2app将网页打包成apk步骤 使用HbuilderX创建一下wap2app项目 我…
阅读更多...
第五周-第07章节-Python3.5-内置模块详解之OS模块

第五周-第07章节-Python3.5-内置模块详解之OS模块

os.sep:取代操作系统特定的路径分隔符 os.name:指示你正在使用的工作平台。比如对于Windows&#xff0c;它是nt&#xff0c;而对于Linux/Unix用户&#xff0c;它是posix。os.getcwd:得到当前工作目录&#xff0c;即当前python脚本工作的目录路径。os.getenv()和os.putenv:分别用…
阅读更多...
2021前端面试题总结

2021前端面试题总结

HTML CSS 定位 flex布局 display css3新属性 css3的边框-border-radius–box-shadow–border-image 背景 background-size–background-origin &#xff1a;属性规定背景图片的定位区域。文字效果&#xff1a;text-shadow&#xff1a;在 CSS3 中&#xff0c;text-shadow …
阅读更多...
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)…
阅读更多...
在eclipse中创建第一个java应用程序，并在控制台输出“hello world”。

在eclipse中创建第一个java应用程序，并在控制台输出“hello world”。

package com.fs.test;public class HelloWorld {public void aMethod() {}public static void main(String[] args) {System.out.print("Hello world");}}转载于:https://www.cnblogs.com/ooo888ooo/p/11042700.html
阅读更多...
R-CNN , Fast R-CNN , Faster R-CNN原理及区别

R-CNN , Fast R-CNN , Faster R-CNN原理及区别

github博客传送门csdn博客传送门 RCNN 1、生成候选区域 使用Selective Search&#xff08;选择性搜索&#xff09;方法对一张图像生成约2000-3000个候选区域&#xff0c;基本思路如下&#xff1a; &#xff08;1&#xff09;使用一种过分割手段&#xff0c;将图像分割成小区域 …
阅读更多...
Vue和iview-admin搭建的项目进行兼容

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

写在前面&#xff1a; 用iview-admin创建的基于Vue的项目&#xff0c;开发完成后&#xff0c;用户是使用的360浏览器&#xff0c;其中有两个模式&#xff0c;一个是极速模式&#xff08;谷歌内核&#xff09;&#xff0c;一个是兼容模式&#xff08;IE内核&#xff09;&#x…
阅读更多...
App过大

App过大

最近开发中遇到一个报错信息 如下 Error:Cannot fit requested classes in a single dex file.Try supplying a main-dex list. # methods: 72477 > 65536 大致意思是Android App中的方法数超过65535时&#xff0c;如果往下兼容到低版本设备时&#xff0c;就会报编译错误 主…
阅读更多...
第三课《让简历有点色彩》

第三课《让简历有点色彩》

一、学习了css 的概念、工作方式、语法 CSS (Cascading Style Sheets) &#xff1a;是一种用于向用户指定文档如何呈现的语言 — 它们如何被指定样式、布局等工作方式&#xff1a; 浏览器将 HTML 和 CSS 转化成 DOM &#xff08;文档对象模型&#xff09;。DOM在计算机内存中表…
阅读更多...
最新文章

Copyright @ 2022~2023