错误 [Vue 警告]：选项“el”只能在实例创建期间使用 `new` 关键字使用

Question

我有以下缩写的 vue 组件：

    <template>
    <section>
        <v-card class="mx-auto" color="#26c6da" dark max-width="1200">
        <v-carousel >
            <v-carousel-item v-for="(item,i) in items" :key="i" v-html="item.content"> </v-carousel-item>
        </v-carousel>
        </v-card>
    </section>
    </template>


    <script>
    ...........................
    console.log(res);
    export default {
        el: '#app',
        data: function() {
        return {
            items: res
        };
        }
    };
    </script>

    <style scoped>
    #app iframe {
        width: 100%;
        height: 500px;
    }
    </style>

我想在底部添加css来控制轮播外观。 为此，我尝试声明 'el' 属性并将 css 挂在其上。 我收到标题中的错误。 我该如何解决？

Answer 1

您的组件中不需要el: '#app', 。 这仅在启动新的 Vue 应用程序时使用。

此外，您的 css 将根据 style 标签上的 scoped 属性自动将范围限定为该组件实例。

如果 Iframe 嵌套在另一个组件中，您将需要使用深度选择器：

<style scoped>
    /deep/ iframe {
        width: 100%;
        height: 500px;
    }
</style>

https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

Answer 2

使用 Jest 进行单元测试时出现此错误。

下面的这段代码在App.vue的单元测试期间抛出了错误：

〜/ app.js

import App from '~/components/App.vue';

const app = new Vue({
    el: '#app',
    router,
    store,
    ...App,
});

~/components/App.vue

export default {
    el: '#app', // remove this to fix a redundant-declaration error

    // ...
}

解决方案是删除App.vue多余的el声明。 回想起来，这是有道理的，因为el被声明了两次，第二次是通过...App,当组件被传播到app.js的新应用程序时（注意：app.js 在时间方面首先运行）。

在我的例子中，这不是很明显，因为传播操作混淆了冗余声明。 它需要分析两个文件才能看到它。

该应用程序确实有效，但 Jest 在单元测试期间发现了错误。