有没有办法渲染来自 ajax 响应的组件?例如,我注册了一个组件“Test”,在 ajax 响应中我有:
<p>dummy paragraph</p>
<test></test> <!-- vue component I want to render -->
<p>another dummy paragraph</p>
我的最终目标是制作一个简码,让用户在内容区域中插入路由器链接。
我正在使用 Vue 2,vue 路由器
有没有办法渲染来自 ajax 响应的组件?例如,我注册了一个组件“Test”,在 ajax 响应中我有:
<p>dummy paragraph</p>
<test></test> <!-- vue component I want to render -->
<p>another dummy paragraph</p>
我的最终目标是制作一个简码,让用户在内容区域中插入路由器链接。
我正在使用 Vue 2,vue 路由器
我不确定,您在这里面临的确切问题是什么,如果您正在寻找如何呈现从 ajax 调用返回的 HTML,您可以使用v-html来呈现具有 HTML 的字符串变量。
但是请注意:
请注意,内容是作为纯 HTML 插入的——它们不会被编译为 Vue 模板。
所以v-html
不会像你期望的那样编译和渲染任何 vue 组件,你可能需要为它找到一些其他的解决方案。
但是,正如您所说,您需要一种方法来呈现来自 ajax 响应的组件,您可以借助Async-Components,在其中将组件定义为异步解析组件定义的工厂函数。
是的,有办法做到这一点。按着这些次序:
import Vue from 'vue'
import Test from './some/folder/Test.vue'
Vue.component('dummy name', Test)
window.Vue = Vue
<test></test>
) 的 ajax 响应时,您可以决定是否要将其直接插入到您的 DOM 并在之后编译它,或者先编译它然后将其挂载到 DOM。假设您将组件模板直接插入到 DOM 中,就像在您的示例中一样。注意包装器元素。<p>dummy paragraph</p>
<div id="testapp">
<test></test>
</div>
<p>another dummy paragraph</p>
new window.Vue({
el: '#testapp',
})
信息:如果您最初已经安装了根 vue 实例,VueDevtools 将无法识别您的新编译组件。要使其工作,您必须告诉新创建的实例它属于父实例:
var vm = new Vue({
el: '#app',
});
new window.Vue({
el: '#testapp',
parent: vm,
});
注意:新的 vue 实例不会与其他实例共享数据。只有当您有独立的组件(例如文本输入组件)时,这种方法才“有意义”(当然不推荐整个过程),它只是用来独立地将数据发送到服务器。
希望它可以帮助那里的人!