vue父子組件傳值

父組件向子組件傳值
1.在父組件中調用子組件時,定義要傳遞的參數

    //使用子組件,并傳遞value作為prop<childComponent :childValue="parentValue"></childComponent>// 父組件的data中定義傳遞的參數data() {return {parentValue: "這是父組件的值" // 父組件的值};}

2.在子組件中,可以通過props屬性接收父組件傳遞的值

export default {name: "Info",dicts: ['order_status','product_type'],props: {childValue: {type: String,default: "",},    },

子組件向父組件傳值
如果子組件需要向父組件傳遞一個名為 ‘childFun’ 的事件,并傳遞一個數據 item
注:childFun為子組件中要傳遞參數的事件名,parentFun 為父組件中接收收子組件中數據的方法

1.在父組件中調用子組件時,定義接收參數的方法 parentFun

 <childComponent ref="cusShortNamRef"  @childFun="parentFun"></childComponent>//父組件接收數據的方法parentFun(val) {this.form.customerLedgerId = valthis.customerShortNameVisible = false}

2.在子組件需要傳遞數據的方法中使用this.$emit調用名為 childFun 的事件,并傳遞參數 item

//table單選handleCurrentChange(val) {this.currentRow = val;this.$emit("childFun ",this.currentRow.item)},

父組件改變子組件中屬性的方法
1.在父組件中調用子組件時,定義組件的ref屬性

 <childComponent ref="childComRef"  :childValue="parentValue"></childComponent>

2.通過this.$refs.childComRef.屬性名 來獲取子組件的dom,如

  this.$nextTick(function(){this.$refs.childComRef.selectShow = false})

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/210196.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/210196.shtml
英文地址,請注明出處:http://en.pswp.cn/news/210196.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

論文導讀|10月MSOM文章精選:智慧醫療

編者按 在“10月MSOM文章精選&#xff1a;智慧醫療”中&#xff0c;我們有主題、有針對性地選擇了MSOM期刊雜志中一些有關智慧醫療領域的有趣文章&#xff0c;不但對文章的內容進行了概括與點評&#xff0c;而且也對文章的結構進行了梳理&#xff0c;旨在激發廣大讀者的閱讀興趣…

c++--面向對象特性

1.面向對象指的是繼承&#xff0c;封裝&#xff0c;多態。 繼承主要關注類的構造&#xff0c;賦值&#xff0c;析構。 以下對多態&#xff0c;封裝進行補充說明。 2、多態 2.1.定義 a.賦值 派生類的指針&#xff0c;可以賦值給基類的指針。 派送類的對象&#xff0c;可以賦值給…

教師需要什么技能?

作為一名老師&#xff0c;需要掌握許多技能&#xff0c;以便能夠成功地教育和指導學生。以下是一些關鍵技能&#xff1a; 1.教學技能&#xff1a;老師需要有深入的學科知識和教學經驗&#xff0c;以便能夠有效地傳授知識。教師應該了解如何設計和執行教學計劃&#xff0c;制定課…

【Java基礎篇 | 面向對象】—— 聊聊什么是接口(下篇)

個人主頁&#xff1a;兜里有顆棉花糖 歡迎 點贊&#x1f44d; 收藏? 留言? 加關注&#x1f493;本文由 兜里有顆棉花糖 原創 收錄于專欄【JavaSE_primary】 本專欄旨在分享學習JavaSE的一點學習心得&#xff0c;歡迎大家在評論區交流討論&#x1f48c; 上篇&#xff08;【Ja…

SpringBoot 自動裝配原理詳解

什么是 SpringBoot 自動裝配&#xff1f; 我們現在提到自動裝配的時候&#xff0c;一般會和 Spring Boot 聯系在一起。但是&#xff0c;實際上 Spring Framework 早就實現了這個功能。Spring Boot 只是在其基礎上&#xff0c;通過 SPI 的方式&#xff0c;做了進一步優化。 Spr…

解決npm install時報:gyp ERR! configure error

報錯內容&#xff1a; npm ERR! gyp ERR! cwd C:\Users\zccbbg\code\my\examvue\node_modules\node-sass npm ERR! gyp ERR! node -v v16.13.1 npm ERR! gyp ERR! node-gyp -v v3.8.0 npm ERR! gyp ERR! not ok npm ERR! Build failed with error code: 1 解決辦法&#xff1a;…

自行編寫一個簡單的shell!

本文旨在編寫一個簡單的shell外殼程序&#xff01;功能類似于shell的一些基本操作&#xff01;雖然不能全部實現shell的一些功能&#xff01;但是通過此文章&#xff0c;自己寫一個簡單的shell程序也是不成問題&#xff01;并且通過此文章&#xff0c;可以讓讀者對linux中一些環…

C#基礎面試題集

C#基礎 1. 簡述值類型和引用類型有什么區別2. C# String類型比 stringBuilder 類型的優勢是什么?3.面向對象的三大特點4.請簡述private&#xff0c;public&#xff0c;protected&#xff0c;internal的區別5.結構體和類6.請描述Interface與抽象類之間的不同7.在類的構造函數前…

藍橋杯:貨物擺放--因數存到數組里的技巧--減少運算量的方法

小藍有一個超大的倉庫&#xff0c;可以擺放很多貨物。 現在&#xff0c;小藍有 n 箱貨物要擺放在倉庫&#xff0c;每箱貨物都是規則的正方體。小藍規定了長、寬、高三個互相垂直的方向&#xff0c;每箱貨物的邊都必須嚴格平行于長、寬、高。 小藍希望所有的貨物最終擺成一個大…

go自帶rpc框架生產環境使用demo

基礎使用 序列化使用自帶gob協議 server package mainimport ("net""net/rpc" )// 定義一個handler結構體 type HelloService struct { }// 定義handler方法,大小寫&#xff0c;參數&#xff0c;返回值都是固定的&#xff0c;否則無法注冊 func (receiv…

數據庫事務:保障數據一致性的基石

目錄 1. 什么是數據庫事務&#xff1f; 1.1 ACID特性解析 2. 事務的實現與控制 2.1 事務的開始和結束 2.2 事務的隔離級別 3. 并發控制與事務管理 3.1 并發控制的挑戰 3.2 鎖和并發控制算法 4. 最佳實踐與性能優化 4.1 事務的劃分 4.2 批處理操作 5. 事務的未來發展…

Qt OpenCV 學習(文章鏈接匯總)

Qt OpenCV 學習&#xff08;一&#xff09;&#xff1a;環境搭建 Qt OpenCV 學習&#xff08;二&#xff09;&#xff1a;兩個簡單圖片識別案例 Qt OpenCV 學習&#xff08;三&#xff09;&#xff1a;跟蹤視頻中的運動物體 Qt OpenCV 學習&#xff08;四&#xff09;&#xff…

SpringSecurity6 | 自定義登錄頁面

?作者簡介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;熱愛Java后端開發者&#xff0c;一個想要與大家共同進步的男人&#x1f609;&#x1f609; &#x1f34e;個人主頁&#xff1a;Leo的博客 &#x1f49e;當前專欄&#xff1a; Java從入門到精通 ?特色專欄&#xf…

高工氫電年會 | 未勢能源解超朋博士受邀出席并做主題演講

12月4日&#xff0c;以“戰略重構 商業覺醒”為主題的2023高工氫電年會在深圳舉辦&#xff0c;未勢能源副總裁解超朋博士受邀出席開幕式論壇&#xff0c;以《把握機遇、直面挑戰&#xff0c;迎接氫車規模化推廣時代》為主題發表演講&#xff0c;并參與圓桌論壇研討。 氫勢已來&…

【Linux】resolv.conf 文件

resolv.conf resolv.conf 文件 是 DNS 的 client 端使用的文件&#xff0c;用于設置 DNS 服務器的 ip 地址以及 DNS 域名&#xff0c;還可以配置域名搜索順序等等。主要包含如下關鍵字&#xff1a;nameserver、domain、search、sortlist、options。設置的格式都是 關鍵字空格 …

管理類聯考——數學——真題篇——按知識分類——數據

文章目錄 排列組合2023真題&#xff08;2023-05&#xff09;-數據分析-排列組合-組合-C運算-至少-需反面思考真題&#xff08;2023-08&#xff09;-數據分析-排列組合-相鄰不相鄰-捆綁法插空法-插空法注意空位比座位多1個&#xff0c;是用A&#xff1b;捆綁法內部排序用A&#…

Linux(centos, ubuntu) 快速安裝anaconda;5秒安裝anaconda

1.下載Anaconda安裝腳本: 首先&#xff0c;訪問Anaconda的官方下載頁面&#xff1a;https://www.anaconda.com/products/distribution 在頁面上&#xff0c;選擇適用于Linux的Python 3.x版本的Anaconda安裝腳本。也可以使用wget或curl命令從終端下載。示例&#xff1a; wget …

2023中國(海南)國際高爾夫旅游文化博覽會 暨國際商界峰層·全球華人高爾夫精英巡回賽 全國潁商自貿港行盛大啟幕

2023中國&#xff08;海南&#xff09;國際高爾夫旅游文化博覽會&#xff08;以下簡稱“海高博”&#xff09;暨全國潁商走進海南自貿港于12月7-9日在海口觀瀾湖盛大開幕。該活動由中國國際貿易促進委員會海南省委員會、海南省旅游和文化廣電體育廳主辦&#xff0c;中國國際商會…

C語言中getchar函數

在 C 語言中&#xff0c;getchar() 是一個標準庫函數&#xff0c;用于從標準輸入&#xff08;通常是鍵盤&#xff09;讀取單個字符。它的函數原型如下&#xff1a; int getchar(void);getchar() 函數的工作原理如下&#xff1a; 當調用 getchar() 函數時&#xff0c;它會等待…

最新版本11.17的YOLOv8加入注意力方法

本文基于11.17版本,以往版本略有不同,可查看改進YOLOv8,教你YOLOv8如何添加20多種注意力機制進行參考 放入注意力代碼,以biformer注意力為例 import torch import torch.nn as nn import torch.nn.functional as Fdef position(H, W, is_cuda=