快捷導(dǎo)航

Vue3+Ts實(shí)現(xiàn)父子組件間傳值的兩種方式

更新時(shí)間：2023年09月06日 10:22:31 作者：sKK07

這篇文章主要給大家介紹了基于Vue3+Ts實(shí)現(xiàn)父子組件間傳值的兩種方式,使用v-model+emit傳值和使用v-bind+emit傳值兩種方式,文章通過代碼示例介紹的非常詳細(xì),感興趣的同學(xué)可以參考閱讀

方式	特點(diǎn)
`v-model + emit`	簡單明了，無復(fù)雜操作時(shí)使用
`v-bind + emit`	功能齊全，使用麻煩，推薦數(shù)據(jù)處理較多時(shí)使用

1、v-model+emit傳值

說明：v-model數(shù)據(jù)雙向綁定的指令。

1.1父向子傳遞數(shù)據(jù)

1.父組件引入子組件；

2.使用v-model綁定一個(gè)引入子組件的屬性(如：num）；

3.子組件中使用defineProps接收。

1.2子向父傳遞數(shù)據(jù)

1.聲明defineEmites；

2.在defineEmits中聲明(event: 'update:num', n: number): void;

3.進(jìn)行事件觸發(fā)執(zhí)行emit('update:num', 40)

代碼示例：

// 父組件
<template>
    <div>
        <div>
            <div> 父組件 {{ num1 }}</div>
            <button @click="add">父按鈕</button>
        </div>
        <!-- v-model的傳值 -->
        <Child v-model:num="num1"></Child>
    </div>
</template>
<script setup lang="ts">
import Child from './02-AppChild.vue'
import { ref } from 'vue'
let num1 = ref(20)
const add = () => {
    num1.value++
}
</script>
<style scoped></style>

//子組件
<template>
    <div>
        <div>子組件{{ num }}</div>
        <div>{{ n }}</div>
        <button @click="hdClick">按鈕</button>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
let props = defineProps({
    num: {
        type: Number,
        default: 100
    }
})
const emit = defineEmits<{
    // update:固定寫法，后面的變量是父組件中v-model：后面的這個(gè)變量
    (event: 'update:num', n: number): void
}>()
let n = ref(props.num)
const hdClick = () => {
    // emit(上面event的值，要修改成的值)
    emit('update:num', n.value+=10)
}
</script>
<style scoped></style>

效果圖：

2、使用v-bind+emit

說明：v-bind非雙向數(shù)據(jù)綁定，子組件傳來的數(shù)據(jù)需要進(jìn)行賦值。

2.1父向子傳遞數(shù)據(jù)

1.父組件引入子組件；

2.使用v-bindl綁定一個(gè)引入子組件的屬性(如：num）；

3.子組件中使用defineProps接收。

2.2子向父傳遞數(shù)據(jù)

1.聲明defineEmites；

2.在defineEmits中聲明(event: 'fn', n: number): void;

3.進(jìn)行事件觸發(fā)執(zhí)行emit('fn',num3.value)

4.父組件中@fn對(duì)應(yīng)的chanNum接收參數(shù)并賦值。

代碼示例：

// 父組件
<template>
    <div>
        <!-- 父組件 -->
        <p>{{ num1 }}</p>
        <p>{{ num3 }}</p>
        <button @click="add">父按鈕</button>
        <Child :num="num1" @fn="chanNum"></Child>
    </div>
</template>
<script setup lang="ts">
import Child from "./11-AppChild.vue";
import { ref } from "vue";
let num1 = ref(10)
let num3 = ref(0)
const chanNum = (num33:number) => {
    num3.value=num33
}
const add = () => {
    num1.value++
}
</script>
<style scoped></style>

// 子組件
<template>
    <div>
        <!-- 子組件 -->
        <p>{{ num }}</p>
        <p>{{ num3 }}</p>
        <button @click="hdClick">按鈕</button>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
defineProps({
    num: {
        type: Number,
        default: 30
    }
})
let num3=ref(30)
// 子傳父的時(shí)候需要先定義好emit這個(gè)方法
const emit = defineEmits<{
	//fn為父組件引入子組件是定義的子組件事件屬性，可隨意定義
    (event: 'fn', n: number): void
}>()
const hdClick = () => {
    // vue2通過$emit("自定義事件名"，參數(shù))
    num3.value+=2
    emit('fn',num3.value)
}
</script>
<style scoped></style>

效果圖：

總結(jié)

父向子組件傳參兩中方式并沒有太大區(qū)別，只是在引用子組件聲明屬性的時(shí)候一個(gè)是v-model一個(gè)是v-bind，在接收參數(shù)的時(shí)候則完全相同。
對(duì)于子組件向父組件傳參則大為不同，v-model方式下父組件僅能單調(diào)的接收子組件傳來的參數(shù)不能對(duì)傳來的數(shù)據(jù)進(jìn)行任何操作。除非單獨(dú)另寫邏輯進(jìn)行處理。而v-bind方式下父組件在接收到子組件傳來參數(shù)的同時(shí)能在聲明的方法中對(duì)傳來的數(shù)據(jù)和父組件本身的數(shù)據(jù)進(jìn)行任意處理。

以上就是Vue3+Ts實(shí)現(xiàn)父子組件間傳值的兩種方式的詳細(xì)內(nèi)容，更多關(guān)于Vue3+Ts父子組件間傳值的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: