javascript - 组件内的组件 - VueJS

原文 标签 javascript vue.js

我很难理解这一点,所以我有一个已经被遵守的组件,它是 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 warn]: Failed to mount component: template or render function not defined.


<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

错误图像 enter image description here

最佳答案

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

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

根据您的描述,我怀疑您的依赖项中有某种循环,您可能会发现 the documentation about circular references有帮助。

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

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

关于javascript - 组件内的组件 - VueJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53878756/

相关文章:

javascript - 如何从动态代码中的字符串中插入匹配的单词?

javascript - 解析saveAll vs个人保存循环

javascript - 将参数传递给Vue.js中的multiselect的@select-vue-multiselect

javascript - 在v文本字段中使用花括号vuetify?

javascript - 滚动到溢出时滚动到<li>(javascript)

javascript - html 图片标题仅适用于鼠标在两侧

javascript - 没有settimeout的递归js函数

javascript - 谷歌分析片段是否应该在 <head> 内

javascript - Vuetify组合框多次添加选项?

vue.js - Vuex、vue-router 和处理页面重新加载 (F5)