gpt4 book ai didi

vue.js - vuejs - 如何将 ajax 加载的 html 转换为 vuejs 组件

转载 作者:搜寻专家 更新时间:2023-10-30 22:47:19 28 4
gpt4 key购买 nike

我有一个带有一些 html 的#app 容器,我在#app 上创建了 Vue 实例,所有内容都被编译并转换为 Vuejs 组件。然后我在另一个 html 字符串中使用 ajax,我需要以某种方式将其编译成组件,我该怎么做?

最佳答案

这是 template 的用例选项,它可以引用 <template>在您的 DOM 中使用特定 ID(就像您使用 el 选项对您的应用所做的那样),或直接使用您的 HTML 模板:

Vue.component({
template: `<span class="myItem"><slot></slot></span>`
});

您可以轻松地将其转换为 Async Component通过向您的组件列表提供一个函数,该函数返回一个使用组件构造函数解析的 Promise(例如使用 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://v2.vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State
function loadComponentWithLoading() {
return {
component: loadComponent(),
loading: MyLoadingComponent,
};
}

// https://v2.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://v2.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>

关于vue.js - vuejs - 如何将 ajax 加载的 html 转换为 vuejs 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51375545/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com