4

有没有办法渲染来自 ajax 响应的组件？例如，我注册了一个组件“Test”，在 ajax 响应中我有：

<p>dummy paragraph</p>
<test></test> <!-- vue component I want to render -->
<p>another dummy paragraph</p>

我的最终目标是制作一个简码，让用户在内容区域中插入路由器链接。

我正在使用 Vue 2，vue 路由器

编辑：这是一个演示https://jsfiddle.net/Paulius_Krutkis/4mb1ypqs/

4

2 回答 2

2

我不确定，您在这里面临的确切问题是什么，如果您正在寻找如何呈现从 ajax 调用返回的 HTML，您可以使用v-html来呈现具有 HTML 的字符串变量。

但是请注意：

请注意，内容是作为纯 HTML 插入的——它们不会被编译为 Vue 模板。

所以v-html不会像你期望的那样编译和渲染任何 vue 组件，你可能需要为它找到一些其他的解决方案。

替代方式

但是，正如您所说，您需要一种方法来呈现来自 ajax 响应的组件，您可以借助Async-Components，在其中将组件定义为异步解析组件定义的工厂函数。

在此处查看演示：https ://jsfiddle.net/4mb1ypqs/1/

于 2016-11-19T17:10:57.633 回答
0

是的，有办法做到这一点。按着这些次序：

  1. 全局注册组件（将作为 ajax 响应发送）。
import Vue from 'vue'
import Test from './some/folder/Test.vue'

Vue.component('dummy name', Test)
  1. 要么将 Vue 添加到窗口对象，要么将其导出并导入到任何你需要的地方。在这里，我将把它添加到全局窗口对象中，以便我可以在浏览器控制台中轻松访问它。
window.Vue = Vue
  1. 当您获得带有未编译的 DOM 元素 ( <test></test>) 的 ajax 响应时，您可以决定是否要将其直接插入到您的 DOM 并在之后编译它，或者先编译它然后将其挂载到 DOM。假设您将组件模板直接插入到 DOM 中，就像在您的示例中一样。注意包装器元素。
<p>dummy paragraph</p>
<div id="testapp">
  <test></test>
</div>
<p>another dummy paragraph</p>
  1. 创建一个新的 Vue 实例并告诉它应该挂载在哪里。由于您的测试组件已经在全球范围内注册，vue 知道它的外观，并且一旦在 DOM 中看到它就会编译它。或者，您也可以在“组件”属性中添加它。
new window.Vue({
    el: '#testapp',
})
  1. 完毕！

信息：如果您最初已经安装了根 vu​​e 实例，VueDevtools 将无法识别您的新编译组件。要使其工作，您必须告诉新创建的实例它属于父实例：

var vm = new Vue({ 
  el: '#app',
});

new window.Vue({ 
  el: '#testapp', 
  parent: vm,
});

注意：新的 vue 实例不会与其他实例共享数据。只有当您有独立的组件（例如文本输入组件）时，这种方法才“有意义”（当然不推荐整个过程），它只是用来独立地将数据发送到服务器。

希望它可以帮助那里的人！

于 2022-02-10T00:51:13.813 回答