从ajax html响应中追加多个Vue2组件不起作用

Question

我试图用jquery附加多个vuejs组件，但它不起作用。所有这些都可以正常工作，直到响应返回多个组件或组件中的组件。

下面是代码：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<div id="app">
</div>

<script type="text/x-template" id="template-1">
    <div>
     <h1>Template 1 {{param}}</h1>
    </div>
</script>

<script type="text/x-template" id="template-2">
    <div>
     <h1>Template 2 {{param}}</h1>
    </div>
</script>


<script>
    Vue.component('template-1', {
         template: '#template-1',
         props: ['param']
       });

       Vue.component('template-2', {
         template: '#template-2',
         props: ['param']
       });

       const vm = new Vue({
           el: '#app'
       });
</script>

<script>

    function loadMore(){
        $.get('/home/test', function (response) {
            var MyComponent = Vue.extend({
                template: response
            });

          
            var compiled = new MyComponent().$mount();
            $('#app').append(compiled.$el);
        });
    }

   loadMore();

</script>

如果以下响应来自ajax，则它可以工作，并呈现一个组件：

<template-1 param="Test"></template-1>

如果以下响应从ajax返回，则它只呈现第一个组件：

<template-1 param="Test"></template-1>
<template-2 param="Test"></template-2>

如果以下响应从ajax返回，则呈现这两个组件：

<div>
    <template-1 param="Test"></template-1>
    <template-2 param="Test"></template-2>
</div>

如果以下响应从ajax返回，则它只呈现父组件：

<template-1 param="Test">
    <template-2 param="Test"></template-2>
</template-1>

是否有一种方法可以始终使此工作，而不知道将从服务器返回多少组件？

Answer 1

由于您告诉Vue您的response.data应该是el属性的值，它将检查它内部，并呈现所有已注册并因此已知的组件。

在您的情况下，您应该始终将响应包装在另一个HTML元素中，该元素应该是el属性值。

注意:只有当父组件(这里是模板-1)注册了第二个Vue元素时，才能呈现其他Vue元素中的Vue元素。意味着当template-1被呈现时，它中的所有内容都将被删除，除非它使用的是插槽。

如果您想使用插槽，这可以帮助您。

否则，您可以使用渲染函数并构建自己的动态呈现内容。