时间戳

首页 > 解决方案 > 让 Vue 解释以编程方式插入的组件

javascript - 让 Vue 解释以编程方式插入的组件

问题描述

我想使用Rangy 库div修改我的 Vue 组件模板中的一个。我的一种方法中有这样的代码：

let tooltip = document.createElement('button');
tooltip.setAttribute('type', 'button');
tooltip.setAttribute('v-tooltip.top-center', '"msg"');
tooltipSpan.innerHTML = 'x';

// Insert span with tooltip after of mistake
range.collapse(false);
range.insertNode(tooltipSpan);

正如您在第三行中看到的，我还想使用v-tooltip组件。如果我可以在模板中对其进行硬编码，那就是<button v-tooltip.top-center="msg">x</button>. 但是在我的应用程序中，这个组件可以通过编程方式放置在 div 内的任何位置，所以我需要用 JavaScript 插入它。该组件也可能有多个实例。

不幸的是，我的方法根本不起作用。不管我是使用上面提到的方法使用v-tooltip指令还是简单地插入一个组件（例如，let tooltip = document.createElement('my-custom-tooltip');）都没有关系：新的 DOM 元素已正确插入，但 Vue 不将其识别/解释为组件。在上面的例子中，我得到的只是一个简单的、无样式的按钮元素。

我尝试了this.$forceUpdate(),this.$nextTick()和一堆旧方法（可能已经从 Vue 2 中消失了），但没有任何效果。

有没有办法让 Vue 在手动更改 DOM 后重新渲染，正确解释已插入的组件？

标签： javascriptvue.jsdomvuejs2

解决方案

Vue“拥有”属于任何组件的 DOM 树；如果你像现在这样在 DOM 中乱七八糟，那么你创建或修改的任何 Vue 特定的东西（比如指令）都不会神奇地起作用。

Vue 生成的 DOM 是组件数据的函数；每当数据发生变化时，Vue 都会重新渲染 DOM 以反映该变化。Vue 不知道如何处理您对 DOM 所做的手动更改。

我不知道您具体要做什么以及为什么需要 Rangy，但是执行此类操作的正确方法是修改您的数据而不是 DOM，然后您的模板（或渲染函数）负责渲染新数据。

有没有办法让 Vue 在手动更改 DOM 后重新渲染，正确解释已插入的组件？

不。

推荐阅读