1、父传子 defineProps
<TabsTable :isFromProject="true" />
const props = defineProps({
isFromProject: Boolean
});
2、子传父 defineEmits
const emit = defineEmits(['resizeWidth']);
const tableBoxWidth = ref<boolean>(false);
const changeWidth = (bol) => {
tableBoxWidth.value = bol;
emit('resizeWidth', tableBoxWidth.value);
}
<TabsTable @resizeWidth="getWidth" />
const rightBoxFull = ref<boolean>();
const getWidth = (n) => {
rightBoxFull.value = n;
};
3、暴露属性 defineExpose
import ModalList from './modal.vue';
import DrawerList from './drawer.vue';
<ModalList ref="modalListRef" />
<DrawerList ref="drawerListRef" />
<a-button type="primary" @click="add()">新增1</a-button>
<a-button type="primary" @click="drawerListRef.open()">新增2</a-button>
const modalListRef = ref();
const add = () => {
modalListRef.value.visible = true;
};
const drawerListRef = ref();
const visible = ref<boolean>(false);
defineExpose({
visible
});
const visible = ref<boolean>(false);
const open = () => {
visible.value = true;
};
defineExpose({
open
});
4、provide和inject
const Index_Provide_2D = reactive({
projectInfo:{}
});
provide('Index_Provide_2D', Index_Provide_2D);
const Index_Provide_2D = inject("Index_Provide_2D");
5、mitt
import mitt from 'mitt';
const emitter = mitt();
emitter.emit("pdfMarkContent", JSON.stringify(DrawingReviewInfo.value));
emitter.on("pdfMarkContent", (content) => {
console.log(content);
});