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

<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>

<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>