<template>
<div>
<div>父组件</div>
<detail ref="sonRef"></detail>
<el-button @click="getSonMessage">获取子组件数据</el-button>
<div>{{ message }}</div>
<div v-for="item in state.fatherList " :key ="item.id">{{ item.name}}</div>
</div>
</template>
<script setup>
import { ref,toRefs ,reactive} from "vue";
import detail from "@/views/role/detail.vue";
let sonRef = ref("sonRef");
let message = ref("")
let state=reactive({
fatherList:[],
})
let getSonMessage=()=>{
console.log(sonRef.value.sonInfo,sonRef.value.dataList,"+sonInfo")
state.fatherList = sonRef.value.dataList
message.value = sonRef.value.message
sonRef.value.show()
}
</script>
<template>
<div>子组件</div>
<div v-for="item in state.dataList" :key="item.id">{{item.name}}子组件</div>
</template>
<script setup>
import { defineExpose, onMounted, reactive, ref, toRefs } from "vue";
import { getuserListApi } from "@/api/user";
let message = ref("简单类型");
let state = reactive({
dataList: [{ id: 1, name: 123 }],
sonInfo: {
name: "子组件",
tip: "对象",
},
});
onMounted(async () => {
let { code, data } = await getuserListApi();
if (code == 0) {
state.dataList = data;
}
});
let show = () => {
console.log("子组件的show方法");
};
let { dataList } = toRefs(state);
defineExpose({
dataList: dataList,
message,
show,
sonInfo: state.sonInfo,
});
</script>