建站
咨詢
售后
建站咨詢
新聞中心
組件之間傳值，大家都很熟悉，涉及到 VUE3 +TS 好多同學(xué)就無(wú)從下手了，所以分享這篇文章，希望看完后提起 VUE3+TS 能夠不慌不忙。
平時(shí)使用的函數(shù)如：ref、reactive、watch、computed 等需要先引入才能使用，但是本篇文章介紹的 defineProps、withDefaults、defineEmits、defineExpose 都是開箱即用的函數(shù)，無(wú)需引入。
父向子傳值：defineProps
在父組件內(nèi)給子組件傳值時(shí)，通過(guò) v-bind 綁定一個(gè)數(shù)據(jù)，然后子組件使用 defineProps 接收數(shù)據(jù)。
可以傳遞的數(shù)據(jù)有兩種：字符串類型 和 非字符串類型。字符串類型不需要 v-bind，非字符串需要使用 v-bind，可以簡(jiǎn)寫成冒號(hào)（:）。
/* 父組件代碼 */ 父組件
子組件接收的時(shí)候使用 defineProps，需要注意的是我們使用 TS 需要加類型限制，如果不是 TS 的可以直接使用。
TS 語(yǔ)法使用：
defineProps<{title: string; data: number[]}>()非 TS 語(yǔ)法使用：
defineProps({title: { default: "", type: string }, list: Array})對(duì)應(yīng)上邊父組件傳值，使用 TS 語(yǔ)法接收的子組件代碼為：
子組件 {{ title }} {{ list }}默認(rèn)值：withDefaults
在非 TS 語(yǔ)法中，default 可以設(shè)置默認(rèn)值，在 TS 語(yǔ)法中，如何設(shè)置默認(rèn)值呢？
withDefaults 是一個(gè)無(wú)需引入開箱即用的函數(shù)，可以接收兩個(gè)參數(shù)，第一個(gè)用于defineProps 接收參數(shù)，第二個(gè)參數(shù)是一個(gè)對(duì)象用于設(shè)置默認(rèn)值。
使用方式1：分離模式
type Props = {title?: string; list?: number[]}withDefaults(defineProps(), {title: "默認(rèn)值", list: () => [1, 2]}) 使用方式2：組合模式
widthDefault(defineProps<{ title?: string, list?: number[] }>(), {title: "默認(rèn)值", list: () => [1, 2]})給上邊的子組件添加默認(rèn)值代碼如下：
子組件
{{ title }}
{{ list }}
將父組件中傳的值刪除掉之后，發(fā)現(xiàn)設(shè)置的默認(rèn)值就展示出來(lái)了。
子向父?jìng)髦担篸efineEmits
子組件給父組件進(jìn)行傳值時(shí)，都是通過(guò)派發(fā)事件，去觸發(fā)父組件中的事件并接收值。
在子組件綁定一個(gè) @click 事件，然后通過(guò) defineEmits 注冊(cè)自定義事件，當(dāng)點(diǎn)擊 @click 事件時(shí)觸發(fā) emit 去調(diào)用注冊(cè)事件，然后傳遞參數(shù)。
非 TS 聲明語(yǔ)法
// clickname 父組件自定義事件名let emit = defineEmits([ 'clickname' ])const postV = () => {emit('clickname', '傳遞的值或變量')}TS 聲明語(yǔ)法
// clickname 父組件自定義事件名let emit = defineEmits<{(e: 'clickname', str: string): void}>()const postV = (str: string): void => {emit('clickname', str)}如果是多個(gè)自定義事件，寫法如下：
type Person = { name: string age: number}let emit = defineEmits<{ (e: 'clickname', str: string): void (e: 'getData', per: Person): void}>()const postV = (str: string): void => {emit('clickname', str)}const postVData = (per: Person): void => {emit('getData', per)}我們?cè)谧咏M件內(nèi)，使用 defineEmits 添加派發(fā)事件：
子組件
父組件內(nèi)使用自定義事件，接收子組件傳遞來(lái)的數(shù)據(jù)：
父組件
defineExpose
子組件向父組件傳值時(shí)，除了使用 defineEmits 之后，也可以使用 defineExpose ，它是通過(guò)把組件自己的屬性暴露出去，父組件先獲取到子組件，再獲取屬性值。
defineExpose 接收一個(gè)對(duì)象參數(shù)，包含需要傳遞的屬性。
defineExpose({name, count, ....})在子組件內(nèi)，定義和暴露需要傳遞的屬性：
子組件
在父組件內(nèi)使用 ref 獲取到子組件，然后打印屬性：
父組件
文章名稱：Vue3 + TS + Vite 父子組件間如何通信？
轉(zhuǎn)載來(lái)源：http://www.5511xx.com/article/ccdhide.html
