vue3用ref实现子组件向父组件传递div

在Vue3中，可以使用`ref`来实现子组件向父组件传递`div`元素，具体步骤如下：

1. 在子组件中，使用`ref`来获取`div`元素的引用，并将其传递给父组件：

<template>
  <div ref="myDiv">Hello World</div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const myDiv = ref(null)

    return {
      myDiv
    }
  }
})
</script>

2. 在父组件中，将子组件传递过来的`ref`绑定到父组件的数据属性中：

<template>
  <div>
    <child-component :my-div-ref="myDivRef"></child-component>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default defineComponent({
  components: {
    ChildComponent
  },
  setup() {
    const myDivRef = ref(null)

    return {
      myDivRef
    }
  }
})
</script>

3. 在父组件中，使用`$refs`来访问子组件传递过来的`div`元素：

<template>
  <div>
    <child-component :my-div-ref="myDivRef"></child-component>
    <button @click="handleClick">Click Me</button>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default defineComponent({
  components: {
    ChildComponent
  },
  setup() {
    const myDivRef = ref(null)

    const handleClick = () => {
      console.log(myDivRef.value) // 输出子组件传递过来的div元素
    }

    return {
      myDivRef,
      handleClick
    }
  }
})
</script>

通过上述步骤，就可以实现子组件向父组件传递`div`元素了。