vue3+vite+ts父子组件之间的传值
作者：demo11111111
随着vue2的落幕,vue3越来成熟,有必要更新一下vue3的父子组件之间的传值方式,这里介绍下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来进行传值。
到此这篇关于vue3+vite+ts父子组件之间的传值的文章就介绍到这了,更多相关vue3+vite+ts父子传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！