如何使用 vue 渲染函数将使用 JavaScript 创建的 Dom 节点添加到 vue

Posted 2023-02-23

【中文标题】如何使用 vue 渲染函数将使用 JavaScript 创建的 Dom 节点添加到 vue

【英文标题】：How to add a Dom node created with JavaScript to vue using vue render functions

【发布时间】：2020-04-29 15:45:06

【问题描述】：

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

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

感谢您的帮助。

【参考方案1】：

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

您仍然可以在渲染函数之外小心操作 DOM，而不会过多地打扰 Vue。如果您的模板中有一个空白占位符 <div> 和 ref，那么只要 DOM 元素保持原位（在 div 上使用 v-if 可能会干扰，那么将一个子元素附加到它应该没问题，但我'我不是 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>

【讨论】：

我已经实现了你的建议并且它有效，但我一直在阅读 Vue 文档以尝试理解更好的渲染功能，我的问题是：为什么我们不能使用这样的东西来插入我们想要进入dom的节点？？ domProps: innerhtml: this.createTreeView() 简单的文本有效，但不是返回节点的函数谢谢您的时间

我们不能这样做，因为 Vue 不允许这样做。这可能是 Vue 可以做的事情，但目前不受支持。