如何使用Vue 3中的Teleport组件实现跨组件的反向传值

<teleport to="body">  <!-- 组件内容 --></teleport>

<!-- 父组件 --><template>  <div>    <h1>{{ message }}</h1>    <teleport to="body">      <child-component :count="count" @increment="incrementCount"></child-component>    </teleport>  </div></template><script>import { ref } from 'vue';import ChildComponent from './ChildComponent.vue';export default {  components: {    ChildComponent,  },  setup() {    const message = ref('Hello World');    const count = ref(0);    const incrementCount = () => {      count.value++;    };    return {      message,      count,      incrementCount,    };  },};</script>

<!-- 子组件 ChildComponent.vue --><template>  <button @click="increment">{{ count }}</button></template><script>import { ref, teleportedElement } from 'vue';export default {  props: {    count: Number,  },  emits: ['increment'],  setup(props, { emit }) {    const increment = () => {      emit('increment');    };    // 获取teleport包装的子组件的元素    const buttonElement = teleportedElement.value;    // 监听button元素的点击事件    buttonElement.addEventListener('click', increment);    // 销毁时移除事件监听    onBeforeUnmount(() => {      buttonElement.removeEventListener('click', increment);    });  },};</script>