vue-layui 弹框传值（父组件传子组件）

father.vue

? ? ? ? 有下拉框?lay-select?，输入框?lay-input?，日期?lay-date-picker?传值

<template>
    <!--表格-->
    <lay-table :page="page" :resize="true" :height="'100%'" :columns="columns"            :loading="loading" :data-source="dataSource" v-model:selected-keys="selectedKeys" 
@change="change">

    <!-- 人员类型 -->
    <template #type="{ row }">
        <span v-if="row.type == 1">员工</span>
        <span v-else-if="row.type == 2">检修单位</span>
        <span v-else-if="row.type == 3">物业单位</span>
        <span v-else-if="row.type == 4">临时施工</span>
        <span v-else-if="row.type == 5">公众开放</span>
        <span v-else-if="row.type == -1">删除中</span>
    </template>

    <!-- 操作 -->
    <template v-slot:operator="{ row }">
        <lay-button size="xs" @click="modifyData(row)">传参按钮</lay-button>
    </template>

    </lay-table>

    <!-- 弹框 -->
    <Frame :frameData="state.frameData" />
</template>

<script setup>
//引入子组件
import Frame from '@/components/tankuang/renyuanxinxiFrame.vue'
import { ref, onMounted, reactive } from 'vue';

 //传入弹框的数据
const state = reactive({
    frameData: {
        username: '',
        phone: '',
        duringTime: '',
        id: '',
        idCard: '',
        type: '',
    }
})


//表格
const loading = ref(false);
const selectedKeys = ref([]);
const dataSource = ref([])
const page = reactive({ current: 1, limit: 5 });//分页
const columns = ref([
    { title: "序号", type: 'number', align: 'center', fixed: 'left' },
    { title: "姓名",  align: 'center', key: "username", fixed: "left", },
    { title: "身份证号", align: 'center', key: "idCard" },
    { title: "人员类型", align: 'center', key: "type", customSlot: "type" },
    { title: "手机号码", align: 'center', key: "phone" },
    { title: "有效时间",  align: 'center', key: "duringTime" },
    { title: "卡号", align: 'center', key: "cardNo" },
    { title: "操作", align: 'center', customSlot: "operator", key: "operator", fixed: "right" }
]);

onMounted(() => {
    getData()
})

const getData = () =>{
    //获取数据
    //ftableInfo为数组
}

//分页点击事件
const change = (page) => {
    loading.value = true;
    setTimeout(() => {
        dataSource.value = loadDataSource(page.current, page.limit);
        loading.value = false;
    }, 1000);
}

//获取分页里的五条数据
const loadDataSource = (page, pageSize) => {
    var response = [];
    var startIndex = ((page - 1) * pageSize);
    var endIndex = page * pageSize - 1;
    // console.log("startIndex", startIndex, "endIndex", endIndex)
    for (var i = startIndex; i <= endIndex; i++) {
        // console.log(ftableInfo)
        if (ftableInfo[i] != undefined) {
            response.push({
                duringTime: ftableInfo[i].duringTime,
                phone: ftableInfo[i].phone,
                username: ftableInfo[i].username,
                id: ftableInfo[i].id,
                cardNo: ftableInfo[i].cardNo,
                idCard: ftableInfo[i].idCard，
                type: ftableInfo[i].type,
            })
        }
    }
    return response;
}


//传参按钮
const modifyData = (row) => {
    state.frameData.username = row.username
    state.frameData.phone = row.phone
    state.frameData.duringTime = row.duringTime
    state.frameData.id = row.id
    state.frameData.idCard = row.idCard
    state.frameData.type = row.type
}


</script>

son.vue

<template>
    <lay-form :model="renyuanxinxiFrame" ref="refform">
        <lay-form-item label="姓名：" prop="username">
            <lay-input v-model="renyuanxinxiFrame.username" type="text"></lay-input>
        </lay-form-item>
        <lay-form-item label="身份证号：" prop="idCard">
             <lay-input v-model="renyuanxinxiFrame.idCard"></lay-input>
        </lay-form-item>
        <lay-form-item label="手机号码：" prop="phone">
              <lay-input v-model="renyuanxinxiFrame.phone" type="number"></lay-input>
        </lay-form-item>
        <lay-form-item label="预约类型：" prop="visitorSelect">
              <lay-select v-model="visitorSelect">
                  <lay-select-option :value="1" label="员工"></lay-select-option>
                  <lay-select-option :value="2" label="检修单位"></lay-select-option>
                  <lay-select-option :value="3" label="物业单位"></lay-select-option>
                  <lay-select-option :value="4" label="临时施工"></lay-select-option>
                  <lay-select-option :value="5" label="公众开放"></lay-select-option>
              </lay-select>
        </lay-form-item>
        <lay-form-item label="有效时间：" prop="duringTime">
              <lay-date-picker v-model='duringTime' range></lay-date-picker>
        </lay-form-item>
        <lay-form-item>
              <lay-button @click="conModify" type="normal">确认</lay-button>
              <lay-button @click="close">取消</lay-button>
        </lay-form-item>
     </lay-form>
</template>

<script setup>
import { ref, reactive, defineProps, watch, onMounted } from 'vue';

//接受传值
const props = defineProps({
    frameData: {
        type: Array,
        required: true
    }
});

const refform = ref();

const renyuanxinxiFrame = reactive({
    username: props.frameData.username,
    idCard: props.frameData.idCard,
    phone: props.frameData.phone,
})
const visitorSelect = ref(props.frameData.type)
const duringTime = ref([props.frameData.duringTime.substring(0, 10), props.frameData.duringTime.substring(13, 23)])

onMounted(() => {

    // 监听 props 的变化，更新值
    watch(() => props.frameData.username, (newValue) => {
        renyuanxinxiFrame.username = newValue;
    });
    watch(() => props.frameData.idCard, (newValue) => {
        renyuanxinxiFrame.idCard = newValue;
    });
    watch(() => props.frameData.phone, (newValue) => {
        renyuanxinxiFrame.phone = newValue;
    });
    watch(() => props.frameData.type, (newValue) => {
        visitorSelect.value = newValue;
    });
    watch(() => props.frameData.duringTime, (newValue) => {
        //我这边打印出来的duringTime.value是：2021-01-01至2023-01-01，所以要转化格式
        duringTime.value = [newValue.substring(0, 10), newValue.substring(13, 23)];
    });

})


</script>

重点：

?watch(() => props.frameData.username, (newValue) => {

? ? ? ? renyuanxinxiFrame.username = newValue;

? ? });

否则无法实时更新