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

Question

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

我正在尝试找到一种方法，将组件标记动态呈现到给定的 <div> 中，而无需在该 <div> 中声明 Vue 组件标记 - 以避免客户混淆。

这是一个工作代码示例：

<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', {
  props: ['id', 'title'],
  template: '<div class="lb-entry">{{ title }}</div>',
});

new Vue({
  el: '#live-blogs',
  template: `
<div>
  <live-blog
    v-for="blog in blogs"
    :key="blog.id"
    :title="blog.title"
  />
</div>`,
  data() {
    return {
      blogs: [],
    };
  },
  methods: {
    getLiveBlogs() {
      request.get('/read/' + id)
        .then(response => {
          this.blogs = response.data.data;
        });
    },
  },
  mounted() {
    this.getLiveBlogs();
  },
});