当语法在 vue 组件中看起来很完美时，“外部根元素将被忽略”错误

Posted 2023-02-23

【中文标题】当语法在 vue 组件中看起来很完美时，“外部根元素将被忽略”错误

【英文标题】："outside root element will be ignored" error when the syntax seems perfect in vue component

【发布时间】：2019-08-22 12:07:31

【问题描述】：

下面的代码一开始似乎没问题，但如果在 chrome 调试器中检查，我会看到一些错误消息“外部根元素将被忽略”

完整代码在这里：

JS fiddle

Vue 组件的模板值当然只有一个包含 div 元素的顶根，但奇怪的是调试器报告它不是。 以下是组件的模板定义部分：

        template: 
        `<div class="modal fade" v-show:"visible">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <slot name="header"></slot>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <slot></slot>
                    </div>
                    <div class="modal-footer">
                        <slot name="footer"></slot>
                        <button type="button" class="btn btn-primary">Save changes</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
      </div>`,

如果我用额外的冗余 div 将整个模板括起来，错误消息就会消失。

【参考方案1】：

您在使用v-show时出错

<div class="modal fade" v-show:"visible">

应该是：

<div class="modal fade" v-show="this.visible">

很可能额外的: 会破坏 vuejs 解析器并最终将您的 div 声明一分为二。