vue.js - 将其标签插入为原始 html 后如何渲染组件？ View 3

Question

所以我有一个vue遗留项目中具有全局注册组件的实例。由于它是遗留的，所以它主要使用 jsrender在一些ajax请求后渲染html。

但是，即使组件已经在 vue 实例中注册，当组件作为原始 html 插入时，vue 也不会在数据获取之后渲染新的组件实例 <component-a></component-a> .

如何让 vue 渲染它？

我需要这个工作才能逐渐将 VueJS 注入(inject)到遗留项目中

进一步说明:

我在初始页面请求的页面上有如下所示的 html block (jsrender 模板)

<script id="some-name-tmpl" type="text/x-jsrender">
        {{ if var1 == 0 }}
        <div> {{ variable }} etc...</div>
        {{/if}}
        <my-vue-component></my-vue-component> // I need this to get rendered as a component
</script>

它们由 jsrender 渲染当一些数据来自后端时的库和JS中的一些渲染方法jsrender与数据一起被调用，所以我得到这样的结果:

<div> x etc...</div>
<my-vue-component></my-vue-component>

但是组件 ( <my-vue-component></my-vue-component> ) 会像原始 html 一样插入，尽管它位于 #app 的内部。 vuejs 上的元素实例已安装，但它是在 vue 实例初始化后插入的，因此 Vue不渲染该组件

所以我需要强制Vue再次扫描页面 html，如 mount()来渲染这个组件。或者我将不得不迁移 jsrender 中的所有模板和数据。 lib 至 Vue一次性完成，工作量很大

Answer 1

据我了解，您需要在 ajax 调用后渲染一些 Vue 组件，但它们似乎超出了 Vue 范围。有 3 种使用动态组件的解决方案，第三种可能适合您的情况，因为它在 Vue 中工作。

1. v-html指令，它是预构建的功能，您可以在 dom 元素下呈现 HTML 字符串内容。

<div v-html="htmlStringConent" />

Dynamic component ，它是 Vue 的预构建组件，接受一个标签名称或注册组件的选择器来渲染它。

<component :is="href ? 'a' : 'registeredComp'"></component>

Web component ，这是现代浏览器的一项功能，用于创建可重用的自定义元素 - 其功能与代码的其余部分封装在一起。只是你应该define your Vue compoents在某种程度上，浏览器可以像原生 dom 元素一样渲染它。然后它会自动在 jsrenderer 范围内工作。

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // normal Vue component options here
  props: {},
  emits: {},
  template: `...`,

  // defineCustomElement only: CSS to be injected into shadow root
  styles: [`/* inlined css */`]
})

// Register the custom element.
// After registration, all `<component-a>` tags
// on the page will be upgraded.
customElements.define('component-a', MyVueElement)

然后您可以在文档树的任何位置使用自定义元素

<component-a></component-a>

希望能帮助您解决问题。