vue3父子组件通信(ref-emits)

父-->子（ref）

父组件：

<script setup>
  import { ref,onMounted } from 'vue'
  import Child from './Child.vue'
   //定义一个关联子组件的值，属性名需要和子组件定义的ref一致
  const child=ref(null)
  onMounted(() => {
    child.value.show()
  })
</script>
<template>
  <Child ref="child" />
</template>

子组件：

<script setup>
  import { defineExpose } from 'vue'
   //定义一个关联子组件的值，属性名需要和子组件定义的ref一致
   const show=()=>{
   console.log('show被调用了')
   }
   // 在vue3里需要使用defineExpose 暴露给父组件，要不然会报错
   defineExpose({ show })
</script>
<template>
<div>子组件</div>
</template>

子-->父（Emits）

父组件：

<script setup>
  import { ref,onMounted } from 'vue'
  import Child from './Child.vue'
   //定义一个关联子组件的值，属性名需要和子组件定义的ref一致
  const child=ref(null)
  onMounted(() => {
    child.value.show()
  })
    //定义一个方法
   const updateLog = e =>{
     console.log(`我是${e}的数据`)
   }
</script>
<template>
  <Child ref="child" @update-log='updateLog' />
</template>

子组件：

<script setup>
  import { defineEmits } from 'vue'
  const emit=defineEmits(['update-log'])
  const clickButton=()=>{
      emit('update-log','子组件')
  }
</script>
<template>
<div><button @click="clickButton">点击我</button></div>
</template>