1

我有一个 JavaScript 函数，它返回一个 DOM 节点，该节点表示一个树视图，其中有许多嵌套节点，我想知道是否可以将该函数传递给 vue 渲染函数？

我知道我不应该弄乱 DOM 或者改用递归模板，但是为了学习和挑战自己，我仍然想弄清楚......如何在 Vue 中操作 DOM，在帮助下的渲染函数。

谢谢你的帮助。

4

1 回答 1

0

我不知道有任何机制可以做到这一点（至少不是正式的）。渲染函数不是以任何方式操作 DOM 的地方。

您仍然可以在渲染函数之外小心地操作 DOM ，而不会过多地打扰 Vue。如果您<div>的模板中有一个带有a 的空白占位符ref，那么只要 DOM 元素保持在原位（v-if在 div 上使用可能会干扰，但我不是 100% 确定这一点），将一个子元素附加到它应该没问题） . Vue 通常在重新渲染中重用相同的 DOM 元素方面做得很好——但这就是问题所在，你正在搞乱 Vue 认为它可以完全控制的 DOM，而且你不能保证 Vue 会与任何外部DOM 发生出乎意料的变化。

多想一下，您可以使用自定义 Vue 指令或组件来实现您想要的。像这样的东西：

Vue.directive('el', {
  bind(el, binding) {
    if (binding.value) {
      el.appendChild(binding.value)
    }
  },
  update(el, binding) {
    // Check if bound element changed
    if (binding.oldValue !== binding.newValue) {
      if (binding.oldValue) {
        // Remove old element
        binding.oldValue.remove()
      }
      if (binding.value) {
        // Append new element
        el.appendChild(binding.value)
      }
    }
  }
})

// Create a DOM element manually
const btn = document.createElement('button')
btn.textContent = 'Click'

new Vue({
  el: '#app',
  render(h) {
    return h('div', {
      directives: [
        {
          name: 'el',
          value: btn
        }
      ]
    })
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>

于 2020-01-13T01:57:41.587 回答