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

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

前言

提示：这里仅描述<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>