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

Question

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

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 后重新渲染，并正确解释已插入的组件？

Answer 1

Vue“拥有”属于任何组件的 DOM 树；如果你像现在一样在 DOM 中搞乱，那么你创建或修改的任何特定于 Vue 的东西(比如指令)都不会神奇地工作。

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

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

Is there a way to make Vue re-render after manual changes to he DOM, correctly interpreting components that have been inserted?

没有。