vue3 中,父子组件如何通信

2023-12-14 16:35:10

子组件

component-a

component-a 暴漏方法,供外部调用

<template>
  <div class="com-a" @click="onClose"></div>
</template>


<script setup>

const emits = defineEmits([
  'close'
])

function notify() {
  console.log('click')
}

function onClose() {
  emits('close')
}

defineExpose({
  notify // 暴漏的方法
})
</script>

  • 子组件对外暴露了 notify 事件,供父组件调用
  • 子组件触发了 close 事件,供父组件接收

父组件

component-b

调用 component-a 组件中的方法

<template>
  <component-a ref="comRef" @close="onClose"></component-a>
</template>

<script setup>

const comRef = ref();


onMounted(() => {

  const instance = comRef.value;

  if(typeof instance?.notify === 'function') {
    instance.notify()
  }
})

function onClose() {
  console.log('父组件方法被调用')
}

</script>
  • 父组件主动调用 notify 方法
  • 父组件接收 close 回调方法

文章来源:https://blog.csdn.net/u013243347/article/details/134996800
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。