vue.js将组件装载到应用程序根目录_Vue.js_Vuejs2

vue.js将组件装载到应用程序根目录

vue.js vuejs2

vue.js将组件装载到应用程序根目录,vue.js,vuejs2,Vue.js,Vuejs2,我有一个modal.vue组件，如下所示： <template> <transition name="modal-transition"> <div class="modal-body" v-if="displayed"> <div class="modal-overlay" @click="displayed = false"></div> <div cl

我有一个modal.vue组件，如下所示：

<template>

    <transition name="modal-transition">
        <div class="modal-body" v-if="displayed">
            <div class="modal-overlay" @click="displayed = false"></div>
            <div class="modal-content">
                <slot/>
            </div>
        </div>
    </transition>

</template>

如何将此组件装入应用程序根元素而不是就地装入

例如：

<body>
  <div id="app">
    <div class="header"></div>
    <div class="nav"></div>
    <div class="stage">
       <div class="sub-nav"></div>
       <div class="content">
          <modal :display.sync="display">MY MODAL</modal> <-- Don't mount here...
       </div>
    </div>
    <-- Mount here instead...
  </div>
</body>


我的模态Vue 2
将元素自身移动到应用程序根元素可以通过两种方式实现，使用门户作为首选解决方案或使用附加
使用门户（首选方法）
PortalVue是两个组件的集合，允许您渲染
组件的模板（或其一部分）在文档中的任何位置-甚至
在Vue应用程序控制的部件之外


使用追加（非最佳做法）
如果添加门户库的工作量过大，则允许使用附加，但在VUE文档中正式禁止使用附加
通常，此特定装载位置将满足您自己的模式或对话框弹出窗口的z索引覆盖，您需要在整个应用程序顶部进行渲染。在本例中，您始终可以使用标准的getElementBy或querySelector函数将this.$root.$el替换为不同的元素目标
在这里，元素被移动，而不是被破坏和重新添加，所有反应功能将保持不变
<script>

    export default {

        name: 'modal',

        ...

        mounted: function() {
            this.$root.$el.append(this.$el);
        },

        destroyed: function() {
            this.$el.parentNode.removeChild(this.$el);
        }
    }
</script>


导出默认值{
名称：'模态'，
...
挂载：函数（）{
this.$root.$el.append（this.$el）；
},
已销毁：函数（）{
this.el.parentNode.removeChild（this.el）；
}
}

在挂载时将元素移动到顶级VUE应用程序实例的挂载位置
在销毁时从新父级中删除已迁移组件的占位符DOM注释，以防止每次组件重新装载其自身时出现孤立重复。
VUE正式声明不销毁VUE之外的元素，因此不要将其与该声明混淆，此处组件已被销毁
例如，当使用vue router切换视图时，这种DOM注释复制通常会发生，因为每次vue router视图状态更改时，这种机制都会装载和卸载路由器视图中的所有组件
此行为是vue路由器引起的错误，vue渲染管理器会正确销毁对象，但错误地保留索引引用，使用门户软件包解决此问题
结果如下：
Vue 3的更新
现在有一个名为的内置特性，它允许将组件模板的一部分装载到任何DOM元素
OP中的示例如下所示



在vue中，直接删除dom元素（尤其是组件中的dom元素）是一个大禁忌。您有任何信息支持这一说法吗？如果有的话，会有什么负面影响？您尚未提供任何帮助解决此问题的信息。仍然在研究这个问题，因此为什么它不是公认的答案，VUE门户软件包肯定也在做类似的事情。在做了更多的测试之后，似乎没有内存问题、UI故障或堆叠绑定，不要忘记hud下的VUE正在与本机JS函数进行接口，正如我所做的那样。VUE已经销毁了相关的事件绑定和数据，但未能清除VUE中place holderRead on reactivity in depth部分的空评论。我不是说这是非法的，但我的意思是这是一种非常糟糕的做法。Vue提倡数据驱动的方法，这意味着您应该避免干预Vue的渲染系统，包括手动销毁由Vue引用和管理的元素。Vue已阅读并花费数天时间寻找“批准的方法”或预先声明dom安装位置的方法，我找到的唯一可能的解决方案是使用“el”选项创建vue实例模板，以指定安装位置，但这似乎是一条可怕的路径，包含大量内容，与vue的原始概念相矛盾，此外还增加了复杂的层次，如必须使用集线器进行数据交换，仅仅为了解决一个微小的z索引边缘案例问题似乎太荒谬了，再加上编码所有这些都会影响性能。。。我目前使用的方法似乎没有破坏任何反应性。