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>