vue3常用的组件之间传值

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

/**父组件**/
//1.引入（最好用大写开头）
import ModalList from './modal.vue';
import DrawerList from './drawer.vue';

//2.使用
<ModalList ref="modalListRef" />
<DrawerList ref="drawerListRef" />

//3.弹框/抽屉的显示与隐藏，通过事件
<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;//通过ref,可以直接改变子组件的属性（相当于传值），也可直接调用子组件的方法
};
// 新增抽屉-表格
const drawerListRef = ref();


/**ModalList子组件**/
//父组件使用子组件的属性或方法，子组件需要定义，还需暴露出来
const visible = ref<boolean>(false);
defineExpose({
  visible
});

/**DrawerList子组件**/
//父组件使用子组件的属性或方法，子组件需要定义，还需暴露出来
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);
});