vue3+vite+ts父子组件之间的传值

---

前言

提示：这里仅描述<script lang="ts" setup>中的写法，另外一种写法的话，基本类似，这里不做展示了

随着vue2的落幕，vue3越来成熟，有必要更新一下vue3的父子组件之间的传值方式，和vue2的大差不差，都是一个道理，只不过写法上出现了差异，vue3+vite+ts安装这里就不写了，由于文章中使用了element-plus的dialog组件作为子组件的内容，所以前提工作是先安装一下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，只不过要定义一下这个变量
const systemDialogref = ref()

// 点击doShow这个方法，使用ref的方式将子组件的弹框调用起来，并且传值过去，
const doShow = () => {
    let str = '这是ref传过去的值'
    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可以传递多个任意类型的值，类似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调用showDialog方法，用到defineExpose将showDialog抛出去，直接用，不需要引入
defineExpose({
    showDialog
});
</script>


<template>
    <div>
        <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
            <div>下面的v-for循环就是父组件传过来的值</div>
            <div v-for="(item, index) in perInfo" :key="index">
                名字: {{ item.name }}
                年龄: {{ item.age }}
            </div>
            <div>下面是通过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都是传给子组件的值，由于子组件是一个弹框，要用到ref的方式打开子组件的弹框

二、子组件向父组件传值

代码如下（子组件示例）：

<script lang="ts" setup>
import { ref } from "vue";
import { ElMessageBox } from "element-plus";

// defineEmits中可以写多个方法
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调用showDialog方法，用到defineExpose将showDialog抛出去，直接用，不需要引入
defineExpose({
    showDialog
});
// 触发事件将子组件的值传递给父组件，send-data要在父组件中接收
const change = () => {
    emit("send-data", "这是子组件传递的一个值");
};
</script>


<template>
    <div>
        <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
            <el-button type="danger" plain @click="change">写一个按钮触发将值传给父组件</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，只不过要定义一下这个变量
const systemDialogref = ref()

// 点击doShow这个方法，使用ref的方式将子组件的弹框调用起来
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，只不过emit写法不一样

三、非父子组件传值，也就是任意两个组件的传值，和vue2基本相似，这里就不描述了，vue3里面建议大家使用pinia来进行传值。