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.pswp.cn/news/248719.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/248719.shtml
英文地址，請注明出處：http://en.pswp.cn/news/248719.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋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