开发中常用的 vue 小技巧,防加班防脱发

CloudJay_喵喵喵

于 2018-06-20 10:57:35 发布

阅读量472

点赞数

CC 4.0 BY-SA版权

分类专栏：技术指南文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_31061615/article/details/80743205

20 篇文章

订阅专栏

本文介绍了一种在Vue中将嵌套组件的DOM挂载到body的方法，解决了复杂嵌套和fixed布局导致的CSS异常问题，并提供了如何在组件销毁前清理挂载DOM的示例。此外还提供了一个简单的页面刷新技巧。

嵌套组件的dom生成到body下

有时候我们的组件会嵌套的很深,在有fixed的情况下,css会不正常,这时候需要把dom放到body下面,

但我们都知道vue不借助jQuery操作dom并不方便,这时候可以使用这个方法把dom挂载到body下:

使用vue-dom-portal,这个库可以给vue增加一个自定义命令v-dom-portal,可以方便的直接把dom挂载到指定位置

注意dom挂载到body后,如果组件或者父组件注销是不会触发已挂载的dom的自动更新的,这时候需要手动删除这些挂载的元素

  <div ref="pop" v-dom-portal="true">
  </div>
<div ref="pop" v-dom-portal="true">
  </div>

  beforeDestroy(){
    this.$refs.pop.remove();
  }
beforeDestroy(){
    this.$refs.pop.remove();
  }

比较简单,直接上代码

  this.$router.go(0);
this.$router.go(0);

工作或学习时,碰到其他的再补充了,

谢谢观看!