快捷導(dǎo)航

vue3+vite+ts父子組件之間的傳值

更新時(shí)間：2023年12月25日 14:35:37 作者：demo11111111

隨著vue2的落幕,vue3越來(lái)成熟,有必要更新一下vue3的父子組件之間的傳值方式,這里介紹下vue3+vite+ts父子組件之間的傳值方式實(shí)例詳解,感興趣的朋友一起看看吧

前言

提示：這里僅描述<script lang="ts" setup>中的寫(xiě)法，另外一種寫(xiě)法的話，基本類似，這里不做展示了

隨著vue2的落幕，vue3越來(lái)成熟，有必要更新一下vue3的父子組件之間的傳值方式，和vue2的大差不差，都是一個(gè)道理，只不過(guò)寫(xiě)法上出現(xiàn)了差異，vue3+vite+ts安裝這里就不寫(xiě)了，由于文章中使用了element-plus的dialog組件作為子組件的內(nèi)容，所以前提工作是先安裝一下element-plus

一、父組件向子組件傳值

代碼如下（父組件示例）：

<script setup lang="ts">
import systemDialog from '../../components/systemDialog.vue'
import { reactive, ref } from "vue";
const perInfo = reactive([
    {
        name: '張三',
        age: 20
    },
    {
        name: '李四',
        age: 25
    },
])
// vue2中的ref，vue3中也一樣是使用ref，只不過(guò)要定義一下這個(gè)變量
const systemDialogref = ref()
// 點(diǎn)擊doShow這個(gè)方法，使用ref的方式將子組件的彈框調(diào)用起來(lái)，并且傳值過(guò)去，
const doShow = () => {
    let str = '這是ref傳過(guò)去的值'
    systemDialogref.value.showDialog(str)
}
</script>
<template>
    <div>
        <el-button text @click="doShow">click to open the Dialog</el-button>
        <systemDialog ref="systemDialogref" :perInfo="perInfo" msg="這是一段文本" />
    </div>
</template>
<style scoped>
</style>

代碼如下（子組件示例）：

<script lang="ts" setup>
import { ref } from "vue";
import { ElMessageBox } from "element-plus";
// defineProps可以傳遞多個(gè)任意類型的值，類似vue2中的props
defineProps<{ perInfo: Array<any>; msg: string }>();
const dialogVisible = ref(false);
const handleClose = (done: () => void) => {
    ElMessageBox.confirm("Are you sure to close this dialog?")
        .then(() => {
            done();
        })
        .catch(() => {
            // catch error
        });
};
const testData = ref();
const showDialog = (val: any) => {
    testData.value = val;
    dialogVisible.value = true;
};
// 父組件使用ref調(diào)用showDialog方法，用到defineExpose將showDialog拋出去，直接用，不需要引入
defineExpose({
    showDialog
});
</script>
<template>
    <div>
        <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
            <div>下面的v-for循環(huán)就是父組件傳過(guò)來(lái)的值</div>
            <div v-for="(item, index) in perInfo" :key="index">
                名字: {{ item.name }}
                年齡: {{ item.age }}
            </div>
            <div>下面是通過(guò)ref父組件傳給子組件的值</div>
            <div>{{ testData }}</div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<style scoped>
.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>

注意：父組件代碼中的perInfo和msg都是傳給子組件的值，由于子組件是一個(gè)彈框，要用到ref的方式打開(kāi)子組件的彈框

二、子組件向父組件傳值

代碼如下（子組件示例）：

<script lang="ts" setup>
import { ref } from "vue";
import { ElMessageBox } from "element-plus";
// defineEmits中可以寫(xiě)多個(gè)方法
const emit = defineEmits(["send-data"]);
const dialogVisible = ref(false);
const handleClose = (done: () => void) => {
    ElMessageBox.confirm("Are you sure to close this dialog?")
        .then(() => {
            done();
        })
        .catch(() => {
            // catch error
        });
};
const showDialog = () => {
    dialogVisible.value = true;
};
// 父組件使用ref調(diào)用showDialog方法，用到defineExpose將showDialog拋出去，直接用，不需要引入
defineExpose({
    showDialog
});
// 觸發(fā)事件將子組件的值傳遞給父組件，send-data要在父組件中接收
const change = () => {
    emit("send-data", "這是子組件傳遞的一個(gè)值");
};
</script>
<template>
    <div>
        <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
            <el-button type="danger" plain @click="change">寫(xiě)一個(gè)按鈕觸發(fā)將值傳給父組件</el-button>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<style scoped>
.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>

代碼如下（父組件示例）：

<script setup lang="ts">
import systemDialog from '../../components/systemDialog.vue'
import { ref } from "vue";
// vue2中的ref，vue3中也一樣是使用ref，只不過(guò)要定義一下這個(gè)變量
const systemDialogref = ref()
// 點(diǎn)擊doShow這個(gè)方法，使用ref的方式將子組件的彈框調(diào)用起來(lái)
const doShow = () => {
    systemDialogref.value.showDialog()
}
const sendData = ref(null)
const handleReceivedData = (res: any) => {
    console.log(res);
    sendData.value = res
}
</script>
<template>
    <div>
        <el-button text @click="doShow">click to open the Dialog</el-button>
        {{ sendData }}
        <systemDialog ref="systemDialogref" @send-data="handleReceivedData" />
    </div>
</template>
<style scoped>
</style>

子組件向父組件傳值，和vue2的很相似，邏輯也一樣，也是用到emit，只不過(guò)emit寫(xiě)法不一樣