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 回答