Vue 允许在任何地方使用组件，而不仅仅是在#app答案

【问题标题】：Vue allow components anywhere, not just in #appVue 允许在任何地方使用组件，而不仅仅是在#app
【发布时间】：2020-03-29 08:56:58
【问题描述】：

现在我正在使用以下内容设置我的 Vue 实例：

import ListClubsComponent from "./components/clubs/list-clubs.vue";
new Vue({
    el: "#app",
    components: {
        "list-clubs": ListClubsComponent
    }
});

这是有效的，但前提是组件位于 <div id="app"> 内部，但奇怪的是只有 Vue 组件会被渲染，如果我在应用程序 div 中有任何 HTML，它将不会被渲染。

我在 Laravel with Blade 项目中使用它。我的默认模板如下：

<body>

    @include('templates.header')

    <main id="app">
        <h1>This won't be rendered</h1>

        <!-- This will be rendered -->
        <list-clubs :player="{!! $player !!}"></list-clubs>
    </main>

    @include('templates.footer')
</body>

list-clubs.vue

<template>
    <h1>List Clubs Component</h1>
</template>

<script lang="ts">
    import Vue from "vue";
    import Component from "vue-class-component";
    import { Clubs } from "../../modules/clubs";

    export default class ListClubsComponent extends Vue {}
</script>

【问题讨论】：

似乎在这里工作：jsfiddle.net/hrtopk74
我不打算只渲染 HTML，我将在上面发布组件代码。
看起来您正在从vue-class-component 导入Component，但您从未使用过它。我发现当你在不使用 @Component 装饰器的情况下扩展 vue 时会发生有趣的事情。
@CraigHarshbarger 这似乎解决了问题，谢谢！
我继续并将其发布为答案，因为这是解决方案。

标签： javascript laravel vue.js vuejs2 laravel-blade

【解决方案1】：

我看到您正在从vue-class-component 导入Component，但是当您在ListClubsComponent 中扩展Vue 时，您并没有使用它。当你在不使用 @Component 装饰器的情况下扩展 vue 时会发生有趣的事情。确保你使用它

<script lang="ts">
    import Vue from "vue";
    import Component from "vue-class-component";

    @Component
    export default class ListClubsComponent extends Vue {}
</script>

【讨论】：