强制 Vue 组件重新渲染

Posted 2023-02-23

【中文标题】强制 Vue 组件重新渲染

【英文标题】：Forcing Vue component to re-render

【发布时间】：2017-05-08 13:10:48

【问题描述】：

所以这听起来一定有点奇怪，但我制作了一个 Vue 应用程序，它充当我们用 Angular 构建的主应用程序的文档。我希望文档做的一件事是显示一些简单的角度组件（代码以及该组件的呈现方式）。

我正在使用 Vue-router，它成功地允许我路由一堆不同的部分。我将<my-angular-component></my-angular-component> 放在我的一个 Vue 模板中，在我的页面中包含 Angular 之后，角度组件实际上可以正确呈现。但是，它仅在我刷新浏览器并在第一页呈现时正确呈现。一旦我使用路由器视图转到其他路线，然后返回到最初的路线，角度组件将不再呈现。

任何人都知道如何告诉页面上的 Angular 在我查看它时重新渲染我的 Angular 组件？

【参考方案1】：

如果 Angular 组件在 vue 组件中，您可以使用 $compile 手动编译它，并将其插入到您希望它在 mounted 钩子中的位置。这样每次创建 vue 组件时都会重新渲染角度组件。您可能还需要在beforeDestroy 钩子中清理它（调用$scope.$destroy()）。

混合这两个框架可能不值得麻烦。