vue3使用setup語法糖組件基礎傳值

?(1):defineProps:傳入要使用的props定義自定義屬性,傳遞過來的值具有響應式,和props一樣;

(2):defineEimts:傳入要自定義的事件,emit實例去傳入自定義事件的值,和$emit或context.emit一樣;

父組件:

<template><initInput :index="8" @changeInit="changeInit"></initInput>
</template><script lang="ts" setup>
import initInput from './computed/initInput.vue';
const changeInit = (e: any) => {console.log(e);  // 100
}
</script>

子組件:

<template><div><el-button type="primary" @click="change">點擊</el-button></div>
</template>
<script lang="ts" setup>
import { onMounted, getCurrentInstance } from 'vue';
import { useRoute, useRouter } from 'vue-router';
// data數據
let { proxy: this_ }: any = getCurrentInstance();
let route = useRoute();
let router = useRouter();
// mounted
// methods方法
let props = defineProps({index: {type: Number,default: 0}
});
let emit = defineEmits(["changeInit"]);
const change = () => {console.log(props.index);  // 8emit("changeInit", 100);
}
</script>
<style scoped  lang='scss'>
</style>

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

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

相關文章

S7-200可用的modbus RTU完成位輪詢

網上的信息比較散&#xff0c;官方說明也不充分&#xff0c;尤其是涉及主站按需寫入的部分沒有見到現成案例。 以下記錄完成位輪詢讀取&#xff0c;同時按需寫入的程序。 初始化主站&#xff0c;初始化塊的完成位M9.3通過上升沿觸發一個M9.4&#xff0c;用于后面啟動輪詢。 第…

特征點檢測與匹配——MATLAB R2022b

特征點檢測與匹配在計算機視覺中的作用至關重要,它為圖像處理、物體識別、增強現實等領域提供了堅實的基礎。 目錄 Harris角點檢測 SIFT(尺度不變特征變換) SURF(加速穩健特征) ORB(Oriented FAST and Rotated BRIEF) 總結 特征點檢測與匹配是計算機視覺中的一項基…

Vue3實現PDF在線預覽功能

?&#x1f308;個人主頁&#xff1a;前端青山 &#x1f525;系列專欄&#xff1a;Vue篇 &#x1f516;人終將被年少不可得之物困其一生 依舊青山,本期給大家帶來Vue篇專欄內容:Vue3現PDF在線預覽功能 前言 在開發中&#xff0c;PDF預覽和交互功能是一個常見的需求。無論是管理…

常用的EDA 工具

1&#xff09; 邏輯設計&#xff1a; Cadence 的Verilog XL ? 模擬電路設計&#xff1a; Mentor 的Viewdraw ? 電路合成&#xff1a; Synopsys 的Design Compiler ? 電路仿真&#xff1a; Synopsys 的Hsim 和Hspice ? 人工布局&#xff1a; Cadence 的Virtuso ? 自動布局…

基于ESP32的桌面小屏幕實戰[5]:PCB下單

1. 焊接調試前準備 PCB下單 點擊“PCB下單” 檢查一下DRC 確認無錯誤之后&#xff0c;確認下單 然后就會跳轉到下面的網頁 基本上保持默認選項即可。可以看到“焊盤噴鍍”有3個選項。 在選擇表面處理工藝時&#xff0c;應綜合考慮產品的具體需求、環保法規以及成本等因素。例…

云原生架構的演變與實踐

云原生架構的演變與實踐 在現代軟件開發的時代背景下&#xff0c;云原生架構日益成為推動業務轉型的關鍵。它以云為中心的應用架構和開發思維&#xff0c;不僅包括了容器化的基本形式&#xff0c;更涉及全方位的應用管理及優化。本文將圍繞云原生的特征、遷移步驟以及模式展開…

探索現代 Web 開發中的流行技術:深入學習 Vite 的使用

在前端開發的世界中&#xff0c;構建工具扮演著越來越重要的角色。從 Webpack 到 Parcel&#xff0c;再到 Rollup&#xff0c;每個工具都有自己的獨特定位和目標。而今天&#xff0c;我們要討論的是一款近年來迅速崛起并受到廣泛歡迎的構建工具— Vite。 本文將從基本原理到實…

如何通過 6 種方式將照片從 iPhone 傳輸到戴爾 PC?

“你知道如何將iPhone上的照片轉移到電腦上嗎&#xff1f;我的iPhone上有很多照片&#xff0c;所以我想將這些照片從iPhone轉移到電腦上。請給我一些建議&#xff0c;謝謝&#xff01;” - Nirenling 在戴爾社區中發布 您的iPhone是否被各種精彩的照片和視頻占滿而存儲空間不…

『SQLite』表達式操作

摘要&#xff1a;表達式是一個或多個值、運算符和計算值的 SQL 函數的組合。SQL 表達式與公式類似&#xff0c;都寫在查詢語言中。 基本語法 SELECT column1, column2, columnN FROM table_name WHERE [CONTION | EXPRESSION];布爾表達式 SQLite 的布爾表達式在匹配單個值的…

升級 Spring Boot 3 配置講解 —— 支持斷點傳輸的文件上傳和下載功能

學會這款 &#x1f525;全新設計的 Java 腳手架 &#xff0c;從此面試不再怕&#xff01; 在現代 Web 應用中&#xff0c;文件上傳和下載是非常常見的需求。然而&#xff0c;當文件較大時&#xff0c;傳統的上傳下載方式可能會遇到網絡不穩定或傳輸中斷的問題。為了解決這些問題…

框架Tensorflow2

深度學習框架之Tensorflow2 Tensorflow2版本的介紹 Tensorflow(簡稱tf)是深度學習框架&#xff0c;大大簡化了建模的方法和步驟&#xff0c;把Keras Api當作核心&#xff0c;使用非常簡單&#xff0c;跨平臺&#xff0c;集成各種現成模型&#xff0c;eager mode使得調試起來不…

SpringBoot3-深入理解自動配置類的原理(尚硅谷SpringBoot3-雷神)

文章目錄 目錄了解自動配置 一、導入對應場景的Mean依賴&#xff1a;1、引入依賴**找到自動配置類的所有配置都存放在哪里** 二、編寫主程序&#xff1a;SpringBootApplication觀察源碼時所需要知道的幾個核心注解&#xff1a;1、觀察SpringBootApplication源碼都做了什么 三、…

Mongo高可用架構解決方案

Mongo主從復制哪些事(僅適用特定場景) 對數據強一致性要求不高的場景,一般微服務架構中不推薦 master節點可讀可寫操作,當數據有修改時,會將Oplog(操作日志)同步到所有的slave節點上。那么對于從節點來說僅只讀,所有slave節點從master節點同步數據,然而從節點之間互相…

商業領域 - 競標極簡理解

競標極簡理解 競標是一種投標過程&#xff0c;指參與者&#xff08;通常是企業或個人&#xff09;為了獲得某個項目或合同的執行權&#xff0c;向招標人&#xff08;通常是采購方或項目發起方&#xff09;提交報價和方案&#xff0c;并爭取獲得招標人的認可 競標是一種常見的招…

C#Halcon跨窗口顏色識別

機器視覺是一門讓計算機模擬人類視覺功能的學科。顏色識別在其中扮演著重要的角色&#xff0c;它旨在通過對圖像中的顏色信息進行分析&#xff0c;從而識別出圖像中的目標物體或者區域。例如&#xff0c;在水果分揀系統中&#xff0c;可以根據水果的顏色&#xff08;如蘋果的紅…

01:C語言的本質

C語言的本質 1、ARM架構與匯編2、局部變量初始化與空間分配2.1、局部變量的初始化2.1、局部變量數組初始化 3、全局變量/靜態變量初始化化與空間分配4、堆空間 1、ARM架構與匯編 ARM簡要架構如下&#xff1a;CPU&#xff0c;ARM(能讀能寫)&#xff0c;Flash&#xff08;能讀&a…

Transformer知識梳理

Transformer知識梳理 文章目錄 Transformer知識梳理什么是Transformer&#xff1f;語言模型遷移學習 Transformer結構注意力層原始結構 總結 什么是Transformer&#xff1f; 語言模型 Transformer模型本質上都是預訓練語言模型&#xff0c;大部分采用自監督學習&#xff08;S…

第29天:PHP應用弱類型脆弱Hash加密Bool類型Array數組函數轉換比較

#知識點&#xff1a; 1、安全開發-原生PHP-弱類型脆弱 2、安全開發-原生PHP-函數&數據類型 3、安全開發-原生PHP-代碼審計案例 1、 和 兩個等號是弱比較&#xff0c;使用進行對比的時候&#xff0c;php解析器就會做隱式類型轉換&#xff0c;如果兩個值的類型不相等就會把兩…

STM32F1學習——編碼器接口

一、編碼器接口 編碼器接口可以接收正交編碼器的信號&#xff0c;根據編碼器旋轉產生的正交信號脈沖&#xff0c;通過硬件自動控制CNT值的自增或自減&#xff0c;從而指出編碼器的位置、旋轉方向和旋轉速度。 每個高級定時器和通用定時器都有一個編碼器接口&#xff0c;他們會占…

如何刪除 Docker 中的懸虛鏡像?

在 Docker 中&#xff0c;懸虛鏡像&#xff08;Dangling Images&#xff09;是指那些沒有 標簽 且沒有被任何容器使用的鏡像。這些鏡像通常是由于構建過程中生成的中間層鏡像或未正確清理的鏡像殘留。刪除懸虛鏡像可以釋放磁盤空間并保持 Docker 環境的整潔。 1. 列出懸虛鏡像…