[JavaScript知识库]vue3的setup父子通信

父调用子的方法
父:

<template>
	<div @click="handle">调用子组件的方法</div>
    <child ref="alarmDetailRef" />
</template>

<script setup>
import { ref } from "vue";
let alarmDetailRef = ref(null);

//调用子组件方法
function handle() {
  alarmDetailRef.value.childFn();
}
</script>

子:

<script setup>
function childFn() {
  //
}

//defineExpose暴露出父组件要调用的子方法
defineExpose({
  childFn,
});
</script>

父给子传参
父:

<template>
	<div @click="handle">调用子组件的方法</div>
    <child ref="alarmDetailRef" :a="a" />
</template>

<script setup>
import { ref } from "vue";
let a = ref('父传子')
</script>

子:

<template>
	<div>{{a}}</div>
</template>

<script setup>
import { ref } from "vue";
defineProps({
  a: {
    default: "",
    type: String,
  },
});
</script>

子传父
父:

<template>
	<div>子传父</div>
    <child @fn="fn" />
</template>

<script setup>
import { ref } from "vue";
let a = ref('')

function fn(e){
    a.value = "子触发父事件"
    console.log(e);//接收的子传来的数据 
}
</script>

子:

<template>
	<el-button @click="ff">子传父</el-button>
</template>

<script setup>
import { ref } from "vue";

const emit =  defineEmits(["fn"])

function ff(){
    emit("fn",true)
}
</script>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖