vue2.0怎么把一个已渲染的组件，渲染到一个弹窗上面？要保持组件所有状态和数据?

Z时代
2024-02-13
分类：IT

vue2.0怎么把一个已渲染的组件，渲染到一个弹窗上面？要保持组件所有状态和数据！
因为有很多组件需要这样做，不可能为每一个都写一个方法或者props传入。有没有办法把组件的clone一个，保持状态的状态和数据，重新渲染到一个弹窗上面呢？

回答：

已渲染的组件用ref拿到再给其他的地方使用就可以了

回答：

iframe

回答：

写一个弹窗组件，将所有可能展示的‘已渲染的组件’import进去，根据弹窗组件open传入的参数区分展示哪个‘已渲染的组件’,每个需要的弹窗的地方import这个弹窗组件，调用弹窗组件的open方法并传入参数。没有更省事的办法。

回答：

vue3可以通过teleport来实现这个功能，所以我们只需要用vue2来手写这个组件即可
https://juejin.cn/post/7224051399256916029

回答：

<template>
  <div>
    <button @click="showModal = true">Open Modal</button>
    <keep-alive>
      <component :is="currentComponent" v-if="!showModal"></component>
    </keep-alive>
    <modal v-if="showModal">
      <keep-alive>
        <component :is="currentComponent"></component>
      </keep-alive>
    </modal>
  </div>
</template>
<script>
import Modal from './Modal.vue'
import YourComponent from './YourComponent.vue'
export default {
  components: {
    Modal,
    YourComponent
  },
  data() {
    return {
      showModal: false,
      currentComponent: 'YourComponent'
    }
  }
}
</script>