vue3-组件传值

目录

defineExpose

defineEmits

defineProps 

provide  /  inject

---

defineExpose

子组件向父组件暴露自己的方法（方法和数据）

子组件

 父组件

import robotModal from './components/robotModal.vue'; // 组件

const robotModalRef = ref<InstanceType<typeof robotModal> | null>(null); // 获取 robotModal 组件的ref


// 调用子组件的openModel 方法 ，可以传参数
robotModalRef.value?.openModel(addRobotForm, priorityRobotList.value, addRadioItem.value);

// 添加子组件
<robotModal ref="robotModalRef" :type="modalType" @addSucceed="robotAddSucceed" />

defineEmits

// 发送给父组件的事件

子组件

const emits = defineEmits(['addSucceed']); // 设置传递事件名

emits('addSucceed', form); // 发送成功事件并携带参数

父组件

 

defineProps 

父 -》 子

父组件发送

子组件接收

defineProps({
  type: {
    type: String,
    default: 'add',
  },
});

provide  /  inject

provide  ：父组件可以向所有子组件传递参数

inject：不论子组件又多少，都可以通过inject 获取父组件 传递的参数

父组件

import { reactive, provide } from "vue"; // 导入provide 

 provide("boy", boy); // 往子孙组件传值

子组件

import { toRefs, inject } from "vue"; // 导入inject
const boy = inject("boy"); // 子孙组件接收值