vuejs - 如何将 ajax 加载的 html 转换为 vuejs 组件 [英] vuejs - how to convert ajax loaded html into vuejs components
问题描述
我有一个带有一些 html 的 #app 容器,我在 #app 上创建了 Vue 实例,所有内容都被编译并转换为 Vuejs 组件.然后我在另一个 html 字符串中使用 ajax,我需要以某种方式将它编译成组件,我该怎么做?
这就是 template
选项,它可以引用在您的 DOM 中具有特定 ID 的 <template>
(就像您使用 el
选项),或直接使用您的 HTML 模板:
Vue.component({模板:`<span class="myItem"><slot></slot></span>`});
您可以轻松地将其变成异步组件 通过为您的组件列表提供一个函数,该函数返回一个使用组件构造函数解析的 Promise(例如使用 Vue.extend
):
const MyLoadingComponent = Vue.extend({模板:'#my-loading',});新的 Vue({el: '#app',数据() {返回 {项目: [],};},成分: {我的组件":loadComponentWithLoading,},方法: {新增项目() {this.items.push(Math.random());},},});//https://vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State函数 loadComponentWithLoading() {返回 {组件:loadComponent(),加载:MyLoadingComponent,};}//https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components函数加载组件(){返回新的承诺(功能(解决,拒绝){loadComponentHtml().then((html) => {解决(Vue.extend({//https://vuejs.org/v2/api/#template模板:html,}));});});}函数 loadComponentHtml() {返回新的承诺(功能(解决,拒绝){setTimeout(() => {resolve(`<span class="myItem"><slot></slot></span>`);}, 2000);});}
.myItem {颜色:绿色;}.myLoading {字体样式:斜体;红色;}
<script src="https://unpkg.com/vue@2"></script><div id="应用程序"><button @click.prevent="addItem">添加一些列表项</button><ul><li v-for="item of items"><my-component>{{item}}</my-component>
<模板 id="我的加载"><span class="myLoading">加载中...</span></template>
I have an #app container with some html, and I create Vue instance on the #app, all the content is compiled and converted to Vuejs components. Then I ajax in another html string, and I need to somehow compile that into components, how do I do that?
That is the use case for the template
option, which can either reference to a <template>
with specific ID in your DOM (like you do with your app using the el
option), or directly your HTML template:
Vue.component({
template: `<span class="myItem"><slot></slot></span>`
});
You can easily turn it into an Async Component by providing a function to your component list, which returns a Promise that resolves with the component constructor (e.g. using Vue.extend
):
const MyLoadingComponent = Vue.extend({
template: '#my-loading',
});
new Vue({
el: '#app',
data() {
return {
items: [],
};
},
components: {
'my-component': loadComponentWithLoading,
},
methods: {
addItem() {
this.items.push(Math.random());
},
},
});
// https://vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State
function loadComponentWithLoading() {
return {
component: loadComponent(),
loading: MyLoadingComponent,
};
}
// https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components
function loadComponent() {
return new Promise(function(resolve, reject) {
loadComponentHtml().then((html) => {
resolve(Vue.extend({
// https://vuejs.org/v2/api/#template
template: html,
}));
});
});
}
function loadComponentHtml() {
return new Promise(function(resolve, reject) {
setTimeout(() => {
resolve(`<span class="myItem"><slot></slot></span>`);
}, 2000);
});
}
.myItem {
color: green;
}
.myLoading {
font-style: italic;
color: red;
}
<script src="https://unpkg.com/vue@2"></script>
<div id="app">
<button @click.prevent="addItem">Add some list items</button>
<ul>
<li v-for="item of items">
<my-component>{{item}}</my-component>
</li>
</ul>
</div>
<template id="my-loading">
<span class="myLoading">Loading…</span>
</template>
这篇关于vuejs - 如何将 ajax 加载的 html 转换为 vuejs 组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!