Vue 常見通信

Vue 常見通信
1、父子通信

父傳子 props,子傳父 events($emit);

通過父鏈 / 子鏈 通信$parent / $children;

$refs獲取ref 可以訪問組件實例方法,;

提供與注射provide / inject

a t t r s / attrs/attrs/listeners;

2、兄弟通信
Bus;
Vuex;

provide / inject
v2寫法與v3不同需注意。v3官方API你值得擁有與閱讀:https://cn.vuejs.org/guide/components/provide-inject.html
扛起大槍一起突突突突!
出現原因:解決prop 逐級透傳 父一級與子N級傳值獲取的麻煩。
v2官方解釋:provide 和 inject 綁定并不是可響應的(字符串類型的值)。這是刻意為之的。然而,如果你傳入了一個可監聽的對象,那么其對象的 property 還是可響應的。

**v2 string**
// 父組件
data() {return {name: "卷兒"}},provide: function() {return {newName: () => this.name}// 子組件
inject: ['newName'],
computed: {hnewName() {return this.newName()}}
<!-- 子組件中的使用方式 -->
<h2>{{ hnewName }}</h2> <!-- 推薦使用這種方法 -->
<h2>{{ newName() }}</h2>**v2 obj**
// 父組件
data() {return {obj: {name: "卷兒"}}},provide: function() {return {// 傳遞一個對象obj: this.obj}},// 子組件
inject: ['obj'],
computed: {// 也可以不用計算屬性重新定義objName() {return this.obj.name}}<!-- 子組件中的使用方法 -->
<h2>obj的name: {{objName}}</h2>
<h2>obj的name: {{obj.name}}</h2>
V3采用ts語法,等我先學習一下哈哈哈哈。溜了溜了。

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

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

相關文章

使用Processing和PixelFlow庫創建交互式流體太極動畫

使用Processing和PixelFlow庫創建交互式流體太極動畫 引言準備工作效果展示代碼結構代碼解析第一部分&#xff1a;導入庫和設置基本參數第二部分&#xff1a;流體類定義MyFluidDataConfig 類詳解MyFluidData 類詳解my_update 方法詳解流體類定義完整代碼 第三部分&#xff1a;太…

找數字-算法

解法一、數位模擬 比n大的最小數就是n1&#xff0c;當n1時&#xff0c;以下幾種情況會導致n中1的個數發生變化&#xff08;或者不變&#xff09; 1.n的低位連續1的個數count>1&#xff0c;如1011&#xff0c;10111,1111等&#xff0c;加1后使得n中1的個數減少count-1個 解…

基于SVPWM的飛輪控制系統的simulink建模與仿真

目錄 1.課題概述 2.系統仿真結果 3.核心程序與模型 4.系統原理簡介 5.完整工程文件 1.課題概述 基于SVPWM的飛輪控制系統的simulink建模與仿真。SVPWM的核心思想是將逆變器輸出的三相電壓矢量在兩相靜止坐標系&#xff08;αβ坐標系&#xff09;中表示&#xff0c;通過控…

Python3 數據類型詳解:掌握數據基石,編寫高效程序

Python3 中的基本數據類型包括整數&#xff08;int&#xff09;、浮點數&#xff08;float&#xff09;、布爾值&#xff08;bool&#xff09;、字符串&#xff08;str&#xff09;、列表&#xff08;list&#xff09;、元組&#xff08;tuple&#xff09;、集合&#xff08;se…

JAVA static注入 Util使用之Service注入

一般在Util等靜態方法中調用Service或mapper&#xff0c;初始化后會出現空指針異常&#xff1a;java.lang.NullPointerException。 代碼執行優先級的問題&#xff0c;在一個Java類中&#xff0c;存在著靜態代碼塊&#xff0c;靜態方法&#xff0c;構造函數,成員方法等等。不同…

golang中的類和接口

類 在 Go 語言中并沒有類的概念&#xff0c;而是使用結構體來實現面向對象的特性。通過 type 關鍵字可以定義自定義類型&#xff0c;包括結構體類型。下面是一個簡單的示例&#xff1a; package mainimport "fmt"// 定義一個結構體類型 type Person struct {Name s…

只對外公開必要的信息和步驟

隱藏內部結構 使對象的內部結構對外部不可見的內容的處理被稱為封裝化。只公開方法等使用者所需要的最低限度的接口&#xff0c;使用者只能通過外部接口進行訪問。如此一來&#xff0c;使用該類的程序就無須知道其內部的具體實現。 通過封裝化&#xff0c;不僅可以防止調用者…

Node.js安裝及環境配置(超詳細!保姆級!!)

目錄 一、進入官網地址下載安裝包 二、安裝程序 三、環境配置 四、測試 五、安裝淘寶鏡像 一、進入官網地址下載安裝包 Node.js — Download Node.js (nodejs.org) 選擇對應你系統的 node.js 版本&#xff0c;我選擇的是Windows系統&#xff0c;64位 點擊圖中選項&#…

無人機+應急通信:災害現場應急通信車技術詳解

無人機和應急通信車是災害現場應急通信中的重要技術。無人機可以通過快速到達災害現場&#xff0c;搭載高清攝像頭、紅外熱成像儀、激光雷達等設備&#xff0c;對災區進行實時監測和災情評估&#xff0c;同時也可以通過搭載的通信設備&#xff0c;與指揮中心進行實時通信和數據…

APP逆向實現方式總覽

方式一&#xff1a;硬核分析 梳理出參數的構造邏輯&#xff0c;代碼還原算法 方式二&#xff1a;模擬執行 2.1 Frida-RPC 電腦調用已加載到手機內存中的方法&#xff0c;直接獲取到結果 2.2 AndServer-RPC 安卓程序調用手機中的方法&#xff0c;最后暴露成HTTP服務供電腦…

?什么是排他鎖、共享鎖、意向鎖

共享鎖 共享鎖&#xff0c;又被稱為讀鎖&#xff0c;是由讀取操作所創建的一種鎖。在此期間&#xff0c;其他用戶可以同時讀取數據&#xff0c;但在數據上未釋放所有共享鎖之前&#xff0c;任何事務均無法對其進行修改&#xff08;即獲取數據的排他鎖&#xff09;。 一旦事務…

202009青少年軟件編程(Python)等級考試試卷(三級)

第 1 題 【單選題】 通過算式123122021120可將二進制1101 轉為十進制,下列進制轉換結果正確的是?( ) A :0b10轉為十進制,結果是2 B :0d10轉為十進制,結果是8 C :0x10轉為十進制,結果是10 D :0o10轉為十進制,結果是16 正確答案:A 試題解析: 第 2 題 【單選題】 語句flo…

基于Nios-II實現流水燈

文章目錄 一、新建項目1、選擇芯片2、Qsys設計2.1、點擊Platform Designer2.2配置軟核2.3其他設置 3、Quartus設計3.1添加原理圖3.2添加qip文件3.3其他設置3.4驅動設置 4、Nios-II Eslipse設計參考 一、新建項目 使用的Quartus 18.0及以上版本 1、選擇芯片 2、Qsys設計 2.1、點…

【AIGC調研系列】你好-GPT-4o

GPT-4o是OpenAI最新發布的一款人工智能模型&#xff0c;它具備處理和生成文本、音頻和圖像的能力。這個模型的特點是能夠實時對這些不同類型的輸入進行推理和響應&#xff0c;這使得它在多模態交互方面表現出色[1][2][3]。 GPT-4o的“o”代表“omni”&#xff0c;意味著它是一…

【復試分數線】綜合性985歷年分數線匯總(第四彈)

國家線和34所自劃線 可以看作是考研上岸最最最基礎的門檻。真正決定你能不能進入復試的還要看院線&#xff08;復試分數線&#xff09;&#xff01;今天我將分析考信號的除C9、工科類985的其他7所985近三年復試分數線&#xff08;不包括2024&#xff09;&#xff0c;大家可以參…

Azure IoT Hub是啥

1.概要說明 Azure IoT Hub是微軟在物聯網&#xff08;IoT&#xff09;領域提供的一款重要產品&#xff0c;為設備連接和管理提供了專業的解決方案。以下是關于Azure IoT Hub的詳細介紹&#xff1a; 定義&#xff1a;Azure IoT Hub是一個專為連接和管理數百萬臺物聯網設備而設計…

flutter開發實戰-人臉識別相機使用

flutter開發實戰-人臉識別相機使用 當需要拍攝的時候&#xff0c;需要檢測到人臉再進行后續的操作&#xff0c;這里使用的是face_camera 一、引入face_camera 在工程的pubspec.yaml中引入插件 # 檢測人臉face_camera: ^0.0.8iOS端需要設置相關權限 在info.plist文件中&…

如何按住ctrl滑動鼠標桌面圖標大小不變

如何按住ctrl滑動鼠標桌面圖標大小不變 采取以下步驟&#xff1a; 1、鼠標在電腦桌面空白處單擊右鍵&#xff0c;然后在彈出的對話框最上面有個“查看”&#xff0c;點擊“查看”出來的最上面有“大圖標”“中等圖標”“小圖標”&#xff0c;根據自己的需要選擇圖標大小即可。…

網絡安全快速入門(九)MySQL進階操作

上一章我們了解了對表及庫的基本增刪查改操作&#xff0c;本章我們針對增刪查改內容進行與一些拓展&#xff0c; 9.1字段修飾及數據類型 我們之前在創建表時用到的格式為&#xff1a; create table 表名 ( 字段名1 字段數據類型&#xff08;數據類型長度&#xff09;, 字段名2 …

Pytorch學習-調整torchvision.models中模型輸出類別數

假設你的類別只有10個&#xff0c;而torchvision.models中Vgg16的輸出類別為1000&#xff0c;這時應該如何調整呢&#xff1f; 方法一&#xff0c;直接修改模型中類別的輸出。 from torch.nn import Linear import torchvision import torchVgg16torchvision.models.vgg16(pre…