Bootstrap

Vue3 子组件访问父组件的方法 - 父组件访问子组件的属性或方法 - 子组件修改父组件的值

一。子组件访问父组件的方法

//父组件
<DialogEditing @close-dialog="handleClose" />
const handleClose = () => {};
//子组件
const emit = defineEmits(["closeDialog"]);
const close = () => {
  emit("closeDialog"); // 使用
};

二。父组件访问子组件的属性或方法

//子组件
<script setup>
const count = ref(0);
const increment= () => {
}

// 使用 defineExpose 来暴露 count 和 increment
defineExpose({
  count,
  increment,
});
</script>
//父组件
 <Child ref="childRef" />
 
const childRef = ref(null);
const accessChild= () => {
   childRef.value.increment(); //使用
   console.log('Current count:', childRef.value.count); //使用
}
</script>

三。子组件修改父组件的值

//父组件
 <ImportFile ref="fileDialogRef" v-model:lead-visible="leadVisible" />
 const leadVisible = ref(false);
//子组件
const props = defineProps({
  leadVisible: { type: Boolean }
});
let { leadVisible } = toRefs(props);
const emit = defineEmits(["update:leadVisible"]);

const handleFile = () => {
  emit("update:leadVisible", true); //使用
};
;