父组件
<template>
<div>
<ChildForm :form="form1" />
<ChildForm :form="form2" />
</div>
</template>
<script setup>
import ChildForm from "路径"
const form1 = ref({
list: [],
})
const form2 = ref({
list: ""
))
</script>
// 子组件
<template>
<div>
<el-form :model="form">
<el-form-item>
<Grandson />
</el-form-item>
</el-form>
</div>
</template>
<script setup>
import Grandson from "路径"
import { definePops, reactive, ref, computed, watch } from "vue"
const props = defineProps(["form"]);
const childForm = ref({...props.form});
const urlObj = reactive({
url: "请求select地址",
label: computed(() => childForm.value.list);
isMultiple: true, // 是否多选
})
// 重点
watch(
() => childForm.value.list,
(newVal) => {
childForm.value.list = newVal;
}, {
deep: true,
immediate: true;
})
子组件
<template>
<div>
<el-form :model="form">
<el-form-item>
<Grandson :form="urlObj" />
</el-form-item>
</el-form>
</div>
</template>
<script setup>
import Grandson from "路径"
import { definePops, reactive, ref, computed, watch } from "vue"
const props = defineProps(["form"]);
const childForm = ref({...props.form});
const urlObj = reactive({
url: "请求select地址",
label: computed(() => childForm.value.list);
isMultiple: true, // 是否多选
})
// 重点
watch(
() => childForm.value.list,
(newVal) => {
childForm.value.list = newVal;
}, {
deep: true,
immediate: true;
})
</script>
孙组件
<template>
<div>
<el-select v-model="grandSonUrlObj.label" :multiple="isMultiple">
<el-option v-for="item in options" :key="item.id" :value="item.value" :label="item.label"></el-option>
</el-select>
</div>
</template>
<script setup>
import { definePops, reactive, ref, computed, watch, onMouted, nextTick } from "vue"
const props = defineProps(["form"]);
const grandSonUrlObj = ref({...props.urlObj});
const options = ref([]);
onMouted(() => {
getOptions();
})
// 重点
watch(
() => groupSonUrlObj.value.label,
(newVal) => {
if(typeof(newVal) === 'string'){
grandSonUrlObj.name = newVal || "";
}
if (Array.isArray(newVal)) {
grandSonUrlObj.name = newVal || [];
}
}, {
deep: true,
immediate: true;
});
const getOptions = async () => {
const res = await initOptions();
options.value = res;
// 重点
await nextTick();
}
const initOptions = async () => {
const res = await axios.get(grandUrlObj.value.label);
// 操作内容
return res.data.map(el => {
id: String(el.id),
label: el.label,
})
}
</script>