Vue3學習（組合式API——父、子組件間通信詳解）

目錄

一、組合式API下的父組件傳子組件。(自定義屬性)

（1）基本思想。

（2）核心注意點。(defineProps)

（3）傳遞簡單類型數據。

（4）傳遞對象類型數據。(v-bind="對象類型數據")

（5）傳遞響應式類型數據。(:屬性="響應式數據")

（6）defineProps原理簡要分析。

二、組合式API下的子組件傳父組件。(自定義事件)

（1）基本思想。

（2）核心注意點。

<1>事件驅動通信。

<2>單向數據流原則。

<3>核心實現步驟。

（3）頁面渲染時子組件立即向父組件傳遞數據。

（4）基于子組件的事件函數向父組件傳遞數據。

三、Vue3組合式API中的父、子組件間通信小結。

一、組合式API下的父組件傳子組件。(自定義屬性)

（1）基本思想。
  1. 父組件中給子組件綁定屬性。(propsXXX)
  2. 子組件內部通過props選項（setup中使用defineProps：“編譯器宏”）接收。
（2）核心注意點。(defineProps)
  1. 單向數據流：數據從父組件流向子組件，子組件不直接修改父組件數據。
  2. 聲明式接收：子組件通過 defineProps 聲明要接收的屬性（props），明確數據類型和校驗規則。
  3. 響應式綁定：父組件通過 ref 或 reactive 創建響應式數據。用 ":" 動態綁定到子組件屬性，數據變化時子組件自動更新。
（3）傳遞簡單類型數據。
  • 父組件代碼示例。
<script setup>
//局部子組件（導入就能使用）
import Son from "./components/Son.vue";</script><template><div><h2>我是父組件</h2><Son propsCar="寶馬5系" /></div>
</template><style scoped>
</style>
  • 子組件代碼示例。
<script setup>
//因為寫在setup中，無法直接配置props選項
//借助于“編譯器宏"函數接收子組件傳遞的數據
const props = defineProps({propsCar : String
})
console.log('子組件獲取：',props)
//腳本中獲取屬性需要通過props.xxx獲取
console.log('子組件獲取屬性值：',props.propsCar)
</script><template>
<!-- 對于模版中，可以直接使用props傳遞的值 --><div class="son">我是子組件------{{propsCar}}</div>
</template><style scoped>
.son{border: 1px solid #000;padding: 30px;
}
</style>
  • 頁面渲染效果。

（4）傳遞對象類型數據。(v-bind="對象類型數據")
  • 父組件代碼示例。
<script setup>
//局部子組件（導入就能使用）
import Son from "./components/Son.vue";
const data = {name: "張三",age: 18
}
</script><template><div><h2>我是父組件</h2><Son v-bind="data" />
<!-- 第2種寫法也可以   <Son :="data" />--></div>
</template><style scoped>
</style>
  • 子組件代碼示例。
<script setup>
//因為寫在setup中，無法直接配置props選項
//借助于“編譯器宏"函數接收子組件傳遞的數據
const props = defineProps({name: String,age : Number
})
console.log('子組件獲取：',props)
//腳本中獲取屬性需要通過props.xxx獲取
console.log('子組件獲取屬性值：',props.name)
console.log('子組件獲取屬性值：',props.age)
</script><template>
<!-- 對于模版中，可以直接使用props傳遞的值 --><div class="son">我是子組件------{{name}}------{{age}}</div>
</template><style scoped>
.son{border: 1px solid #000;padding: 30px;
}
</style>
  • 頁面渲染效果。

（5）傳遞響應式類型數據。(:屬性="響應式數據")
  • 父組件代碼示例。
<script setup>
//局部子組件（導入就能使用）
import Son from "./components/Son.vue";
import {ref} from "vue";
const money = ref(100)
const addMoney = () =>{money.value++
}
</script><template><div><h2>我是父組件---當前父組件money：{{money}}<button @click="addMoney">money++</button></h2><Son :propsMoney="money" /></div>
</template><style scoped>
</style>
  • 子組件代碼示例。
<script setup>
//因為寫在setup中，無法直接配置props選項
//借助于“編譯器宏"函數接收子組件傳遞的數據
import {watch} from "vue";const props = defineProps(['propsMoney'])
console.log('頁面首頁渲染子組件獲取：',props)
//腳本中獲取屬性需要通過props.xxx獲取
//監聽父組件傳遞的響應式數據是否變化
watch(() => props.propsMoney, (newValue) => {//每變化一次就打印一次console.log('子組件獲取更新的money值：',newValue)
})
</script><template>
<!-- 對于模版中，可以直接使用props傳遞的值 --><div class="son">我是子組件------父組件傳遞的money：{{propsMoney}}</div>
</template><style scoped>
.son{border: 1px solid #000;padding: 30px;
}
</style>
  • 頁面渲染效果。

（6）defineProps原理簡要分析。
  • 本質上是編譯階段的一個標識。實際當編譯器解析時，遇到后會進行編譯轉換。

二、組合式API下的子組件傳父組件。(自定義事件)

（1）基本思想。
  1. 父組件中給子組件通過@綁定事件。
  2. 子組件內部通過emit方法觸發事件。
（2）核心注意點。
<1>事件驅動通信。
  • 子組件通過自定義事件向父組件發送數據。父組件監聽這些事件并處理數據。
  • 子組件使用defineEmits聲明可觸發的事件。通過emit觸發事件并傳遞參數。
<2>單向數據流原則。
  • 子組件不直接修改父組件數據，而是通過事件通知父組件自行更新。
<3>核心實現步驟。
  1. 子組件步驟。
  • 聲明事件：const emit = defineEmits(['事件名',...,])。
  • 觸發事件：emit ('需觸發的事件名',{需攜帶的參數...})。
  1. 父組件步驟。
  • 監聽事件：子組件標簽<Xxx?@子組件觸發的事件名="父組件中處理事件的方法">。
  • 處理事件：在對應的方法中更新自身狀態。
（3）頁面渲染時子組件立即向父組件傳遞數據。
  • 父組件頁面初始渲染效果。
<script setup>
//局部子組件（導入就能使用）
import Son from "./components/Son.vue";
import {reactive} from "vue";
const data = reactive({name:'張三',addr:'湖南長沙'
})</script><template><div><h2>我是父組件---當前父組件響應式數據：姓名：{{data.name}} 地址：{{data.addr}}</h2><Son /></div>
</template><style scoped>
</style>

  • 子組件自定義事件向父組件傳遞新值。
<script setup>//通過defineEmits編譯器宏聲明事件、emit方法
const emit = defineEmits(['changeValue'])
//頁面渲染時直接觸發自定義的事件并進行傳參
emit('changeValue',{name : '李四',addr : '湖北武漢'
})
</script><template><div class="son">我是子組件</div>
</template><style scoped>
.son{border: 1px solid #000;padding: 30px;
}
</style>
  • 父組件監聽子組件（自定義事件）傳遞的數據。
<script setup>
//局部子組件（導入就能使用）
import Son from "./components/Son.vue";
import {reactive} from "vue";
const data = reactive({name:'張三',addr:'湖南長沙'
})const getValue = (res) => {console.log('子組件傳遞的數據：',res);data.name = res.name;data.addr = res.addr;
};</script><template><div><h2>我是父組件---當前父組件響應式數據：姓名：{{data.name}} 地址：{{data.addr}}</h2>
<!--  @后面跟的必須和子組件的事件名一致  -->
<!--  getValue：處理子組件傳遞的數據，更新自身狀態  --><Son @change-value="getValue" /></div>
</template><style scoped>
</style>
  • 頁面最終渲染效果。

（4）基于子組件的事件函數向父組件傳遞數據。
  • 基本實現：當子組件輸入框的內容并按鈕提交（事件函數觸發），通過自定義事件的觸發將對應的參數通過子組件傳遞到父組件。
  • 子組件代碼示例。
<script setup>//通過defineEmits編譯器宏聲明事件、emit方法
import {ref} from "vue";const emit = defineEmits(['submitInput'])const inputValue = ref('')
//在子組件的對應事件函數上觸發子組件向父組件傳值的自定義事件
const changeInput = () =>{emit('submitInput',{input: inputValue.value})
}
</script><template><div class="son"><h3>我是子組件</h3><div style="padding: 10px"><input type="text" v-model="inputValue">輸入框的值：{{inputValue}}<button @click="changeInput">提交（子傳父）</button></div></div></template><style scoped>
.son{border: 1px solid #000;padding: 30px;
}
</style>
  • 父組件代碼示例。
<script setup>
//局部子組件（導入就能使用）
import Son from "./components/Son.vue";
import {reactive} from "vue";
const data = reactive({value:'哈哈哈哈我是父組件的響應式',
})const getInputValue = (res) => {console.log('子組件傳遞的數據：',res);data.value = res.input;
};</script><template><div><h2>我是父組件---當前父組件響應式數據：{{data.value}}</h2>
<!--  @后面跟的必須和子組件的事件名一致  -->
<!--  getValue：處理子組件傳遞的數據，更新自身狀態  --><Son @submitInput="getInputValue" /></div>
</template><style scoped>
</style>
  • 頁面渲染效果。

三、Vue3組合式API中的父、子組件間通信小結。

  1. 父傳子過程中通過 defineProps({屬性名:類型,...}) 方式接收props。
  2. setup語法糖中通過 const props=defineProps({屬性名:類型,...})、props.xxx 使用父組件傳遞的數據。而在模版中可以直接通過屬性名使用。
  3. 子傳父過程中通過 defineEmits(['事件名',...]) 方式得到emit方法。
  4. 觸發事件：emit('事件名',需傳遞的參數) 。父組件通過@事件名即可監聽。

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

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

相關文章

W5500使用ioLibrary庫創建TCP客戶端

W5500使用ioLibrary庫創建TCP客戶端

1、WIZnet全硬件TCP/IP協議棧 WIZnet全硬件TCP/IP協議棧,支持TCP,UDP,IPv4,ICMP,ARP,IGMP以及PPPoE協議。 以太網&#xff1a;支持BSD和WIZCHIP&#xff08;W5500/W5300/W5200/W5100/W5100S&#xff09;的SOCKET APIs驅動程序。 互聯網&#xff1a; DHCP客戶端 DNS客戶端 FTP客…
閱讀更多...
管理Oracle Data Guard的最佳實踐

管理Oracle Data Guard的最佳實踐

Oracle Data Guard的中文名字叫數據衛士&#xff0c;顧名思義&#xff0c;它是生產庫的一道保障。所以管理Data Guard是DBA的一項重要工作之一&#xff0c;管理Data Guard時主要有以下幾個注意點需要引起重視。 備份庫的歸檔日志積壓 一般情況下&#xff0c;生產庫的歸檔日志是…
閱讀更多...
BootCDN介紹（Bootstrap主導的前端開源項目免費CDN加速服務）

BootCDN介紹（Bootstrap主導的前端開源項目免費CDN加速服務）

文章目錄 BootCDN前端開源項目CDN加速服務全解析什么是BootCDN技術原理與架構CDN技術基礎BootCDN架構特點1. 全球分布式節點網絡2. 智能DNS解析系統3. 高效緩存管理機制4. 自動同步更新機制5. HTTPS和HTTP/2協議支持 BootCDN的核心優勢速度與穩定性開源免費資源豐富度技術規范遵…
閱讀更多...
2025 Java 微信小程序根據code獲取openid，二次code獲取手機號【工具類】拿來就用

2025 Java 微信小程序根據code獲取openid，二次code獲取手機號【工具類】拿來就用

一、controller調用 /*** 登錄** author jiaketao* since 2024-04-10*/ RestController RequestMapping("/login") public class LoginController {/*** 【小程序】登錄獲取session_key和openid** param code 前端傳code* return*/GetMapping("/getWXSessionKe…
閱讀更多...
軟件架構風格系列（3）：管道 - 過濾器架構

軟件架構風格系列（3）：管道 - 過濾器架構

文章目錄 前言一、從生活場景到架構原理&#xff0c;看懂管道 - 過濾器的核心邏輯&#xff08;一&#xff09;什么是管道 - 過濾器架構&#xff1f;&#xff08;二&#xff09;核心組件拆解 二、架構設計圖&#xff1a;一圖看懂管道 - 過濾器架構全貌三、Java 示例代碼&#xf…
閱讀更多...
【VIM】vim 常用命令

【VIM】vim 常用命令

文章目錄 插入模式光標移動拷貝/粘貼/刪除/撤銷塊操作分屏代碼縮進命令組合使用其他PowerVim 前言&#xff1a;本文內容大部分摘抄自酷殼和博客園 ? – ? CoolShell – 陳皓 ? 博客園 – 易先訊 插入模式 a → 在光標后插入o → 在當前行后插入一個新行O → 在當前行前插…
閱讀更多...
polarctf-web-[簡單rce]

polarctf-web-[簡單rce]

考點&#xff1a; (1)RCE(eval函數) (2)執行函數(passthru函數) (3)/頂級(根)目錄查看 (4)sort排序查看函數 題目來源&#xff1a;Polarctf-web-[簡單rce] 解題&#xff1a; 代碼審計 <?php/*?PolarD&N CTF?*/highlight_file(__FILE__);function no($txt){ # …
閱讀更多...
HarmonyOs開發之———使用HTTP訪問網絡資源

HarmonyOs開發之———使用HTTP訪問網絡資源

謝謝關注&#xff01;&#xff01; 前言&#xff1a;上一篇文章主要介紹HarmonyOs開發之———Video組件的使用:HarmonyOs開發之———Video組件的使用_華為 video標簽查看-CSDN博客 HarmonyOS 網絡開發入門&#xff1a;使用 HTTP 訪問網絡資源 HarmonyOS 作為新一代智能終端…
閱讀更多...
Vue 圖片預覽功能（含縮略圖）

Vue 圖片預覽功能（含縮略圖）

眾所周知&#xff0c;常見的組件庫如Element、Ant Design&#xff0c;自帶的圖片預覽功能都沒有縮略圖&#xff0c;所以 需要單獨封裝一個圖片預覽的服務。 第三方庫&#xff1a;v-viewer 安裝&#xff1a; npm install v-viewer viewerjs 若使用報錯&#xff0c;可安裝指定…
閱讀更多...
手寫tomcat：基本功能實現（4）

手寫tomcat：基本功能實現（4）

邏輯架構 HTTP 請求與 Socket&#xff1a; 左側的 “HTTP 請求” 箭頭指向 “socket”&#xff0c;表示客戶端發送的 HTTP 請求通過 socket 傳輸到服務器。Socket 負責接收請求&#xff0c;并提取出其中的 請求路徑&#xff08;如 /first&#xff09;和 請求方法&#xff08;如…
閱讀更多...
jvm安全點(一)openjdk17 c++源碼垃圾回收安全點信號函數處理線程阻塞

jvm安全點(一)openjdk17 c++源碼垃圾回收安全點信號函數處理線程阻塞

1. 信號處理入口?? ??JVM_HANDLE_XXX_SIGNAL?? 是 JVM 處理信號的統一入口&#xff0c;負責處理 SIGSEGV、SIGBUS 等信號。??javaSignalHandler?? 是實際注冊到操作系統的信號處理函數&#xff0c;直接調用 JVM_HANDLE_XXX_SIGNAL。 ??2. 安全點輪詢頁的識別?? …
閱讀更多...
微信小程序：封裝表格組件并引用

微信小程序：封裝表格組件并引用

一、效果 封裝表格組件，在父頁面中展示表格組件并顯示數據 二、表格組件 1、創建頁面 創建一個components文件夾，專門用于存儲組件的文件夾 創建Table表格組件 2、視圖層 (1)表頭數據 這里會從父組件中傳遞表頭數據，這里為columns，后續會講解數據由來 循環表頭數組，…
閱讀更多...
【FMC216】基于 VITA57.1 的 2 路 TLK2711 發送、2 路 TLK2711 接收 FMC 子卡模塊

【FMC216】基于 VITA57.1 的 2 路 TLK2711 發送、2 路 TLK2711 接收 FMC 子卡模塊

產品概述 FMC216 是一款基于 VITA57.1 標準規范的 2 路 TLK2711 接收、2 路 TLK2711 發送 FMC 子卡模塊。該板卡支持 2 路 TLK2711 數據的收發&#xff0c;支持線速率 1.6Gbps&#xff0c;經過 TLK2711 高速串行收發器&#xff0c;可以將 1.6Gbps 的高速串行數據解串為 16 位并…
閱讀更多...
K8S Gateway API 快速開始、胎教級教程

K8S Gateway API 快速開始、胎教級教程

假設有如下三個節點的 K8S 集群&#xff1a; ?? k8s31master 是控制節點 k8s31node1、k8s31node2 是工作節點 容器運行時是 containerd 一、Gateway 是什么 背景和目的 入口&#xff08;Ingress&#xff09;目前已停止更新。新的功能正在集成至網關 API 中。在 Kubernetes …
閱讀更多...
時序數據庫IoTDB分布式架構解析與運維指南

時序數據庫IoTDB分布式架構解析與運維指南

一、IoTDB分布式架構概述 分布式系統由一組獨立的計算機組成&#xff0c;通過網絡通信&#xff0c;對外表現為一個統一的整體。IoTDB的原生分布式架構將服務分為兩個核心部分&#xff1a; ?ConfigNode&#xff08;CN&#xff09;?&#xff1a;管理節點&#xff0c;負責管理…
閱讀更多...
Ubuntu 20.04 LTS 中部署 網頁 + Node.js 應用 + Nginx 跨域配置 的詳細步驟

Ubuntu 20.04 LTS 中部署 網頁 + Node.js 應用 + Nginx 跨域配置 的詳細步驟

Ubuntu 20.04 LTS 中部署 網頁 Node.js 應用 Nginx 跨域配置 的詳細步驟 一、準備工作1、連接服務器2、更新系統 二、安裝 Node.js 環境1、安裝 Node.js 官方 PPA&#xff08;用于獲取最新穩定版&#xff09;&#xff1a;2、安裝 Node.js 和 npm&#xff08;LTS 長期支持版本…
閱讀更多...
3DVR制作的工具或平臺

3DVR制作的工具或平臺

3DVR&#xff08;三維虛擬現實&#xff09;是利用三維圖像技術和虛擬現實技術&#xff0c;將真實場景進行三維掃描并轉換成計算機可識別的三維模型&#xff0c;使用戶能夠在虛擬空間中自由漫游&#xff0c;體驗身臨其境的感覺。3DVR技術結合了全景拍攝和虛擬現實&#xff0c;提…
閱讀更多...
垂直智能體：企業AI落地的正確打開方式

垂直智能體：企業AI落地的正確打開方式

在當前AI浪潮中&#xff0c;許多企業急于跟進&#xff0c;推出自己的AI智能體解決方案。然而&#xff0c;市場上大量出現的"萬能型"智能體卻鮮有真正解決實際問題的產品。本文將探討為何企業應該專注于開發垂直領域智能體&#xff0c;而非追求表面上的全能&#xff0…
閱讀更多...
軟件工程各種圖總結

軟件工程各種圖總結

目錄 1.數據流圖 2.N-S盒圖 3.程序流程圖 4.UML圖 UML用例圖 UML狀態圖 UML時序圖 5.E-R圖 首先要先了解整個軟件生命周期&#xff1a; 通常包含以下五個階段&#xff1a;需求分析-》設計-》編碼 -》測試-》運行和維護。 軟件工程中應用到的圖全部有&#xff1a;系統…
閱讀更多...
王者榮耀游戲測試場景題

王者榮耀游戲測試場景題

如何測試一個新英雄&#xff1a;方法論與實踐維度 測試一個新英雄不僅僅是“打打打”&#xff0c;而是一套完整的測試流程&#xff0c;包括設計文檔驗證、功能驗證、數值驗證、性能驗證、交互驗證等。可以從以下多個角度展開&#xff1a; &#x1f50d; 1. 方法論維度 ? 測試…
閱讀更多...
最新文章

Copyright @ 2022~2023