vue.js - 自定义指令里vnode为什么获取不到值?

问题描述

问 题

我的需求是在应用了指令的元素找到它的父节点
我打印vnode 它的elm.parentNode是有它父节点的.
但我单独打印时却是空的.

console.log(vnode) // vnode > elm > parentNode 有节点对象
console.log(vnode.elm.parentNode) // null

解决方案

原因应该是在打印vnode的那一时刻vnode.elm.parentNode为null（此时DOM还未附加到document中），而在开发者工具里展开vnode的那一时刻vnode.elm.parentNode显然已经有值了。

最简单的方法是可以在setTimeout中处理，vuejs推荐的方法是在nextTick中处理：

<div id="app">
  <span v-test></span>
</div>

new Vue({
  el: '#app',
  directives: {
    test: {
      bind(el, binding, vnode) {
        console.log(vnode.elm.parentNode)
        setTimeout(() => console.log(vnode.elm.parentNode))
        vnode.context.$nextTick(() => console.log(vnode.elm.parentNode))
        Vue.nextTick(() => console.log(vnode.elm.parentNode))
      }
    }
  }
})

这篇关于vue.js - 自定义指令里vnode为什么获取不到值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！