Question

我目前正在构建一些软件，该软件将允许用户将HTML片段拖放到网页中，而我的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();
  },
});

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

1 个答案: