Vue-19-前端框架Vue之應用基礎組件通信(二)

文章目錄

  • 1 v-model(父子相傳)
    • 1.1 App.vue
    • 1.2 Father.vue
      • 1.2.1 v-model用在html標簽上
      • 1.2.2 v-model用在html標簽上(本質寫法)
      • 1.2.3 v-model用在組件標簽上
      • 1.2.4 v-model用在組件標簽上(本質寫法)
    • 1.3 MyInput(自定義的組件)
    • 1.4 修改modelValue
      • 1.4.1 Father.vue
      • 1.4.2 MyInput.vue
  • 2 attrs(祖傳孫打擾中間人)
    • 2.1 Father.vue
    • 2.2 Child.vue
    • 2.3 GrandChild.vue
  • 3 美元refs和美元parent
    • 3.1 Father.vue
    • 3.2 Child1.vue
    • 3.3 Child2.vue

方式一:使用vue/cli腳手架
CMD>vue create 項目名稱方式二:使用vite創建Vue3項目
注意node.js的版本要是最新的
CMD>npm create vue@latest

在這里插入圖片描述

1 v-model(父子相傳)

在這里插入圖片描述

1.1 App.vue

<template><Father />

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

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

相關文章

寶塔下載pgsql適配spring ai

1.寶塔安裝pgvector 1.先去github下載pgvectorpgvector/pgvector: Open-source vector similarity search for Postgres 2.把壓縮包上傳到系統文件的/temp下解壓&#xff0c;重命名文件名為pgvector&#xff0c;之后命令操作 cd /tmp cd pgvector export PG_CONFIG/www/serv…

RK3568項目(八)--linux驅動開發之基礎外設(上)

目錄 一、引言 二、準備工作 ------>2.1、驅動加載/卸載命令 三、字符設備驅動開發 ------>3.1、驅動模塊的加載和卸載 ------>3.2、外部模塊編譯模板 Makefile ------>3.3、cdev 四、LED驅動 ------>4.1、原理圖 ------>4.2、驅動 五、設備樹 -…

BUUCTF在線評測-練習場-WebCTF習題[GXYCTF2019]BabySQli1-flag獲取、解析

解題思路打開靶場&#xff0c;題目提示是sql注入輸入數據&#xff0c;判斷下閉合11123報錯&#xff1a;Error: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 1 at line 1報錯提示…

“AI 曼哈頓計劃”:科技競賽還是人類挑戰?

美國國會下屬的經濟與安全審查委員會已將“推動建立并資助一項堪比曼哈頓計劃的通用人工智能研發項目”列為其對國會的核心建議之一&#xff0c;明確顯示出對AI競賽戰略意義的高度重視。與此同時&#xff0c;美國能源部在近幾個月中多次公開將人工智能的突破比作“下一場曼哈頓…

音頻信號的預加重:提升語音清晰度

一、預加重介紹預加重是一種信號處理技術&#xff0c;主要用于增強音頻信號中的高頻成分。由于人類語音的頻譜特性&#xff0c;尤其是在輔音和音調的表達上&#xff0c;高頻成分對于語音的清晰度至關重要。然而&#xff0c;在錄音和傳輸過程中&#xff0c;這些高頻成分往往會受…

WebSocket實戰:實現實時聊天應用 - 雙向通信技術詳解

目錄一、WebSocket&#xff1a;實時通信的"高速公路"1.1 HTTP的短板&#xff1a;永遠的"單相思"1.2 WebSocket的優勢&#xff1a;真正的"雙向對話"二、30分鐘搭建聊天服務器2.1 環境準備2.2 WebSocket配置類2.3 核心消息處理器三、前端實現&…

宏集案例 | 基于CODESYS的自動化控制系統,開放架構 × 高度集成 × 遠程運維

??案例概況客戶&#xff1a;MACS Sterilisationsanlagen GmbH&#xff08;Ermafa Environmental Technologies GmbH 旗下&#xff09; 應用場景&#xff1a;醫療與感染性廢棄物的無害化處理控制系統應用產品&#xff1a;宏集Berghof高性能控制器設備&#xff08;一&#xff0…

學習JNI 二

創建一個名為Learn1項目&#xff08;Android Studio&#xff09;。一、項目結構二、配置 build.gradlebuild.gradle.kts(:app)plugins {alias(libs.plugins.android.application)alias(libs.plugins.jetbrains.kotlin.android) }android {namespace "com.demo.learn1&quo…

基于Spring Boot+Vue的DIY手工社預約管理系統(Echarts圖形化、騰訊地圖API)

2.10 視頻課程管理功能實現2.11手工互動&#xff08;視頻彈幕&#xff09;2.8預約設置管理功能實現&#x1f388;系統亮點&#xff1a;Echarts圖形化、騰訊地圖API&#xff1b;文檔包含功能結構圖、系統架構圖、用例圖、實體屬性圖、E-R圖。一.系統開發工具與環境搭建1.系統設計…

leetcode 每日一題 1353. 最多可以參加的會議數目

更多技術訪問 我的個人網站 &#xff08;免費服務器&#xff0c;沒有80/443端口&#xff09; 1353. 最多可以參加的會議數目 給你一個數組 events&#xff0c;其中 events[i] [startDayi, endDayi] &#xff0c;表示會議 i 開始于 startDayi &#xff0c;結束于 endDayi 。 …

AI+智慧園區 | 事件處置自動化——大模型重構園區治理邏輯

在智慧園區的建設浪潮中&#xff0c;事件管理一直是園區高效運營的關鍵環節。考拉悠然所推出的大模型 智慧園區解決方案&#xff0c;在事件智能閉環管理方面獨樹一幟&#xff0c;為園區的日常運營編織了一張嚴密、高效、智能的管理網絡&#xff0c;實現了從事件感知到處置的全…

FFmpeg Windows安裝

FFmpeg 用于音頻文件轉換 Builds - CODEX FFMPEG gyan.dev ffmpeg-release-full.7z 下載完成之后 zip解壓 大概就是 ffmpeg/ └── bin/ └── ffmpeg.exe 配置環境變量 ffmpeg -version 有可能idea還是找不到命令 就把命令路徑寫在程序里 例如

【2025/07/10】GitHub 今日熱門項目

GitHub 今日熱門項目 &#x1f680; 每日精選優質開源項目 | 發現優質開源項目&#xff0c;跟上技術發展趨勢 &#x1f4cb; 報告概覽 &#x1f4ca; 統計項&#x1f4c8; 數值&#x1f4dd; 說明&#x1f4c5; 報告日期2025-07-10 (周四)GitHub Trending 每日快照&#x1f55…

JVM 基礎 - JVM 內存結構

前言 本文主要對JVM 內存結構進行講解&#xff0c;注意不要和Java內存模型混淆了。 運行時數據區 內存是非常重要的系統資源&#xff0c;是硬盤和 CPU 的中間倉庫及橋梁&#xff0c;承載著操作系統和應用程序的實時運行。JVM 內存布局規定了 Java 在運行過程中內存申請、分配…

【案例】二手車交易價格預測-472

二手車交易價格預測 數據來源數據特征探索構建模型參考數據來源 天池 https://tianchi.aliyun.com/competition/entrance/231784/information 數據特征探索 目標特征工程做好之后,能同時進行 lightgbm catboost 神經網絡等模型,所以盡量都轉換為數值類特征。 如果僅僅是使用…

【Spring】Java SPI機制及Spring Boot使用實例

目錄 一、SPI是什么 1.1 SPI 和 API 有什么區別&#xff1f; 二、使用場景 三、使用介紹 四、Spring Boot實例運用 五、總結 一、SPI是什么 SPI全稱Service Provider Interface&#xff0c;是Java提供的一套用來被第三方實現或者擴展的API&#xff0c;它可以用來啟用框架…

多維度數據資產測繪技術在安全管控平臺中的應用實踐

一、數據資產治理困境&#xff1a;從 “黑箱” 到 “可見性” 的行業挑戰在數字化轉型加速的當下&#xff0c;企業數據資產呈現爆發式增長&#xff0c;而傳統資產梳理手段因維度單一、時效性差&#xff0c;導致 “資產黑箱” 問題頻發。某省級運營商曾在安全評估中發現&#xf…

搭建react18+項目過程中遇到的問題(vite)

問題1. 頁面中使用import.meta.env獲取環境變量有紅色波浪線提示錯誤按提示給ts.config.ts文件中的compilerOptions增加了"module": “esnext” (es2020 | es2022 | system)這幾個也不行 但是另一個問題出現了安裝的第三方庫引入報錯了 按照提示我們將module改成了’…

Linux epoll簡介與C++TCP服務器代碼示例

Linux epoll 簡介與示例 TCP 服務器 1. 為什么要用 epoll select/poll 每次調用都把全部文件描述符從用戶態拷貝到內核態,隨連接數增長而線性變慢;epoll 采用事件驅動+就緒隊列的方式,內核只把“已就緒”的描述符返回給用戶態,O(1) 規模擴展;支持 邊沿觸發 Edge-Triggere…

IPv4和IPv6雙棧配置

根據IPv6的學習&#xff0c;完成以下一個簡單的雙棧配置案例&#xff0c;具體結構如下圖所示。PC1的 IPv4&#xff1a;192.168.2.1/24 、IPv6&#xff1a;2001:db8:2::2/64&#xff0c;PC2的 IPv4&#xff1a;192.168.3.1/24 、IPv6&#xff1a;2001:db8:3::2/64總共需要兩臺PC…