Vue 元件中 移動 this el 的注意事項

2022-07-18 08:06:11 字數 752 閱讀 7668

比如,

這幾行**會導致 dom 元素位置  與 vnode 期望的位置不一致

比如:父元件: 

div(id='p')

h1 第1個

button(@click="add") 新增

p(v-for="(item,index) in list", :key="index")

| 第 } 個元素

ccc

---js部分
methods:
子元件 ccc:

---js部分
本來 ccc 在vnode 中的位置其父 parent 是  id 為 p 的div 元素, 然後由於在 mounted 中,$el的位置發生了移動,導致其實際的位置發生了改變,父節點變為 body 元素。

這將導致父元件中的 v-for  p 元素,渲染失敗

原因:

在點選 父元件 按鈕是,會觸發 元件的update, 這將會導致新的元素會  insert 到dom樹中,這段**在 vue 原始碼,patch.js 中

在插入新的 p 元素時, 會執行這段**, 三個引數 分別為: div(id='p'),  p 元素自身, ref$$1 為 ccc 的$el

ref$$1.parentnode === parent

由於 ccc 的$el 的parent 發生了變化,導致這行判斷失效, 渲染失敗。

RN中移動元件開發

在原生的開發中,如果要自定義一些控制項,可能會用到touch的相關方法,而react native也有一套touch機制,說白了就是用js寫了一套方法打通android和ios平台,這裡簡單講解下react native rn 的touch機制,這裡先不過多深入研究,先熟悉下流程,至於rn的touc...

vue移動端彈框元件

this.refs.toast.showtoast 提示文案 一 npm 安裝 當前最新版本 1.2.0 npm install vue layer mobile 如新版遇到問題可回退舊版本 npm install vue layer mobile 1.0.0 二 調整配置 因為這個元件中有woff...

在Visual Basic中移動當前記錄的方法

在visual basic中可以使用move的四種方法來移動記錄 movefirst,movelast,movenext和moveprevious方法。如果想讓記錄集中的第一條記錄成為當前記錄,可以使用movefirst方法。例如 以下是引用片段 data1.recordset.movefirst ...