动态地将组件标记传递给 Vue 实例

Question

var customerID = "cus_1234xxx..."; // Retrieved from session or DB

var options = new ChargeListOptions { Limit = 3, Customer = customerID };

var service = new ChargeService();

StripeList<Charge> charges = service.List(

  options

);

希望这能说明问题！

我目前正在构建一些软件，它允许用户将 HTML 片段放入网页中，并且我的 VueJS 堆栈将动态呈现博客文章。

我正在尝试找到一种方法来动态地将组件标记渲染到给定中，<div>而无需在其中声明 Vue 组件标记<div>- 以避免客户感到困惑。

这是工作代码的示例：

<div id="live-blogs" v-cloak>

    <live-blog

        v-for="blog in blogs"

        :key="blog.id"

        :title="blog.title"

    ></live-blog>

</div>

Vue.component('live-blog', {

    props: ['id', 'title'],

    template: '<div class="lb-entry">{{ title }}</div>',

});

const liveBlogs = new Vue({

    el: '#live-blogs',

    data: {

        blogs: [],

    },

    methods: {

        getLiveBlogs: function() {

            request.get('/read/' + id)

                .then(function (response) {

                    liveBlogs.blogs = response.data.data;

                })

        }

    },

    mounted() {

        this.getLiveBlogs();

    }

});

我想做的事

我希望能够删除组件标记，以便我的客户只需复制并粘贴以下代码。我可能会添加更多组件和功能，并且不希望此嵌入的大小不断增大。

一旦检测到目标<div>，JavaScript 就应该处理组件数据的动态注册和渲染。

<div id="live-blogs"></div>

<script type="text/javascript" src="/path/to/file/app.js"></script>

到目前为止我已经尝试过的

我尝试过通过传递组件标记，this.$el.innerHTML = componentMarkup但没有成功。

使用 VueJS 可以吗？

Answer 1

您所需要做的就是将模板作为字符串模板从 DOM 移动到主组件中。只要<div id="live-blogs"></div>页面上有某个地方，它就可以工作。Vue.component('live-blog', {&nbsp; props: ['id', 'title'],&nbsp; template: '<div class="lb-entry">{{ title }}</div>',});new Vue({&nbsp; el: '#live-blogs',&nbsp; template: `<div>&nbsp; <live-blog&nbsp; &nbsp; v-for="blog in blogs"&nbsp; &nbsp; :key="blog.id"&nbsp; &nbsp; :title="blog.title"&nbsp; /></div>`,&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; blogs: [],&nbsp; &nbsp; };&nbsp; },&nbsp; methods: {&nbsp; &nbsp; getLiveBlogs() {&nbsp; &nbsp; &nbsp; request.get('/read/' + id)&nbsp; &nbsp; &nbsp; &nbsp; .then(response => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.blogs = response.data.data;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; },&nbsp; },&nbsp; mounted() {&nbsp; &nbsp; this.getLiveBlogs();&nbsp; },});