比如,

mounted () {
document.body.appendChild(this.$el);
// insertAdjacentElement
// insertBefore
},

这几行代码会导致 dom 元素位置  与 VNode 期望的位置不一致

比如:

---------------------------------------

父组件:

div(id='p')
 h1 第1个
 button(@click="add") 新增
 p(v-for="(item,index) in list", :key="index")
| 第 {{item}} 个元素
 ccc
---js部分
methods: {
add () {
this.list.push(1);
}

}

---------------------------------------

子组件 ccc:

div
 | 我是document.body.append的元素
---js部分
mounted () {
document.body.appendChild(this.$el);
// insertAdjacentElement
// insertBefore
}

---------------------------------------

本来 ccc 在VNode 中的位置其父 parent 是  id 为 p 的div 元素, 然后由于在 mounted 中,$el的位置发生了移动,导致其实际的位置发生了改变,父节点变为 body 元素。

这将导致  父组件中的 v-for  p 元素,渲染失败

 

原因:

在点击 父组件 按钮是,会触发 组件的update, 这将会导致新的元素会  insert 到dom树中,这段代码在 vue 源码,patch.js 中

function insert (parent, elm, ref$$1) {
if (isDef(parent)) {
if (isDef(ref$$1)) {
if (ref$$1.parentNode === parent) {
nodeOps.insertBefore(parent, elm, ref$$1);
}
} else {
nodeOps.appendChild(parent, elm);
}
}
}

在插入新的 p 元素时, 会执行这段代码, 三个参数 分别为: div(id='p'),  p 元素自身, ref$$1 为 ccc 的$el

ref$$1.parentNode === parent

由于 ccc 的$el 的parent 发生了变化,导致这行判断失效, 渲染失败。

Vue 组件中 移动 this.$el 的注意事项的更多相关文章

  1. vue组件中this和$el指向

    示例代码为element ui 源码的select组件源码 控制台输出: 结论: this指向组件的实例. $el指向当前组件的DOM元素.

  2. 15.Vue组件中的data

    1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...

  3. Vue组件中引入jQuery

    一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...

  4. vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

  5. vue组件中的样式属性--scoped

    Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当 ...

  6. vue组件中使用iframe元素

    需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <d ...

  7. Vue 组件中 data 为什么必须是函数

    原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...

  8. vue组件中的data为什么是函数?

    一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...

  9. 第七十三篇:解决Vue组件中的样式冲突

    好家伙, 1.组件之间的样式冲突 默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 举个例子: 我们在Left.vue的组件中添加样式 <templat ...

随机推荐

  1. 关于Qt跨线程调用IO子类的理解

    一.疑问 突然想到,类似于QTcpsocket和QSerialport这类对象,如果是在A线程中new的,那就不能在其他线程中访问.我一般是这样做的: 封装一个QObject子类,放这些对象进去,然后 ...

  2. 【前端】纯html+css+javascript实现楼层跳跃式的页面布局

    实现效果演示: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>楼层跳跃式的页面布局</title&g ...

  3. 质量管理三个概念:QC、QA和QM,你能分得清吗?

    今天这里谈的QC.QA和QM,不是岗位或职位,而是一种概念或质量管理的不同时期所关注的重点. 1.产品 早期的质量管理(工业化雏形期)侧重于对终产品的检测.测试,即QC(品质控制)时代. 这个时期的质 ...

  4. lightoj 1341 Aladdin and the Flying Carpet(算术基本定理)题解

    题意:给一个矩形(非正方形)面积a和最小边长b,要求边长均大于b,求这样的矩形有几个 思路:先用到了之前学的质因数分解,还有一个新的公式: 然后我们可以先算出a的所有约数,因为只算约数个数面积重复,所 ...

  5. Winform中使用折叠窗口

    使用此处的控件 http://www.codeproject.com/Articles/18401/XPanderControls 注意事项 使用之前需要先添加winform自带的toolStripC ...

  6. EF、Repository、Factory、Service间关系

    EF和Repository 实体(Entities):具备唯一ID,能够被持久化,具备业务逻辑,对应现实世界业务对象. 值对象(Value objects):不具有唯一ID,由对象的属性描述,一般为内 ...

  7. 线程面试top50题

    转载:java线程面试题: 不管你是新程序员还是老手,你一定在面试中遇到过有关线程的问题.Java语言一个重要的特点就是内置了对并发的支持,让Java大受企业和程序员的欢迎.大多数待遇丰厚的Java开 ...

  8. ASP.NET MVC & Web API项目中集成MEF

    1.实现方式 //WebApi需要实现的接口 System.Web.Http.Dependencies.IDependencyResolver //MVC需要实现的接口 System.Web.Mvc. ...

  9. poj 1523 SPF 无向图求割点

    SPF Description Consider the two networks shown below. Assuming that data moves around these network ...

  10. 汇编语言调用Linux系统调用read和write

    .section .data UserMsg: .ascii "Please input the message:" LenOfUserMsg: .equ lenMsg, LenO ...