组件内的组件 - VueJS

Question

我很难理解这一点，所以我有一个已经编译好的组件，它是一个grid ，现在当我单击一个按钮时，会弹出一个模态并在模态内显示另一个网格，此时我的代码看起来像这用于模态弹出窗口

<template>

    <transition v-if="this.modalVisible" v-bind:title.sync="this.modalVisible" name="modal">
        <div class="modal-mask">
            <div class="modal-wrapper">
                <div class="modal-container">

                    <div class="modal-header">
                        {{ modalHeaderName }}
                    </div>

                    <div class="modal-body">
                     //this is another component
                    <grid-data :grid-values="dummy" :tool-bar="false"></grid-data> 
                    </div>

                    <div class="modal-footer">

                    </div>
                </div>
            </div>
        </div>
    </transition>

</template>

<script>
    import DataTable from './core/gridTable.vue';


    export default {
        components:{
            JqxButton,
            'grid-data' : DataTable,
        },
        props : {
            modalHeaderName : String,
            modalVisible : Boolean
        },
        data: function () {
            return {
                buttonWidth: 120,
                buttonHeight: '100%',
                value: this.buttonName,
                dummy : [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
            }
        }
    }
</script>

现在， grid是一个已经编译和渲染的 vue 组件，现在我将它再次导入它说

[Vue 警告]：无法挂载组件：未定义模板或渲染函数。

<template>
    <div>
        <!-- sync here is, getting the value from the updated modal-->
        <custom-modal :modal-visible="this.showModal"  v-bind:showModal.sync="showModal" :modal-header-name="this.modalHeaderName"></custom-modal>
        <JqxGrid :width="width" :source="dataAdapter" :columns="gridValues"
                 :pageable="true" :autoheight="true" :sortable="true"
                 :altrows="true" :enabletooltip="true" :editable="true"
                 :selectionmode="'multiplecellsadvanced'"  :showtoolbar="this.toolBar" :rendertoolbar="rendertoolbar">
        </JqxGrid>
    </div>

</template>
<script>
    import JqxGrid from "../jqx-vue/vue_jqxgrid.vue";
    import CustomModal from "../customModal";
    export default {
        components: {
            JqxGrid,
            'custom-modal' : CustomModal
        },
        // added the name here
        name: 'jqx-grid',
        props : {
            gridValues : Array,
            toolBar : Boolean
        },
        data: function () {
            return {
                showModal : false,
                modalHeaderName : '',
                width: '100%',
                dataAdapter: new jqx.dataAdapter({
                     datatype: 'xml',
                     datafields : this.gridValues,
                     url: ''
                }),
                columns: []
            }
        },
        mounted: function () {
            this.createButtons();
        },
        methods: {
            rendertoolbar: function (toolbar) {
                let buttonsContainer = document.createElement('div');
                buttonsContainer.style.cssText = 'overflow: hidden; position: relative; margin: 5px;';

                let addButtonContainer = document.createElement('div');
                let deleteButtonContainer = document.createElement('div');

                addButtonContainer.id = 'addButton';
                deleteButtonContainer.id = 'deleteButton';

                addButtonContainer.style.cssText = 'float: left; margin-left: 5px;padding-bottom:25px;';
                deleteButtonContainer.style.cssText = 'float: left; margin-left: 5px;padding-bottom:25px;';

                buttonsContainer.appendChild(addButtonContainer);
                buttonsContainer.appendChild(deleteButtonContainer);
                toolbar[0].appendChild(buttonsContainer);
            },
            createButtons: function () {

                let addButtonOptions = {
                    height: 25, value: '&nbsp; <i class="fa fa-plus" style="padding-top:3px"></i> &nbsp;Add Items &nbsp;',
                };
                let addButton = jqwidgets.createInstance('#addButton', 'jqxButton', addButtonOptions);
                let deleteButtonOptions = {
                    height: 25, value: '&nbsp; <i class="fa fa-ban" style="padding-top:3px"></i> &nbsp;Remove All &nbsp;',
                };
                let deleteButton = jqwidgets.createInstance('#deleteButton', 'jqxButton', deleteButtonOptions);

                // add new row.
                addButton.addEventHandler('click', (event) => {
                    this.showModal = true;
                    this.modalHeaderName = 'Bulk Add Items';
                });
                // delete selected row.
                deleteButton.addEventHandler('click', (event) => {
                   // alert('delete')
                });

            },
            cellsrenderer: function (row, columnsfield, value, defaulthtml, columnproperties, rowdata) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
        }
    }
</script>

我该如何克服这个问题？

我见过这样的问题，它说组件网格正在尝试再次编译，因此出现错误，但我不确定，所以我们应该使用网格组件的编译版本。

注意：在 Laravel 5.4 中使用 Vue

错误图像

Answer 1

当您第一次发布代码时，我没有看到明显的错误。 现在我在上面代码块的components中看到JqxButton ，它是未定义的。 在您的代码中，您总是会导入一些我们看不到代码的组件。

通常，当我处于这种情况并且一切看起来都还不错时，我会删除所有子组件并查看错误是否消失。 然后，我一个接一个地重新添加一个组件，直到我再次遇到错误并尝试在那里调试它。

根据您的描述，我怀疑您的依赖项中有某种循环，您可能会发现有关循环引用的文档很有帮助。

Vue 需要一个惰性导入来实现循环依赖：

components: {
  "my-circular-dependency": () => import("./my-circular-dependency.vue");
}