Question

现在，我使用以下命令设置Vue实例：

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

这是有效的，但仅当组件位于<div id="app">内时，但奇怪的是只有Vue组件会被渲染，如果我在app div内有任何HTML，就不会被渲染。 / p>

我在带有Blade项目的Laravel上使用它。我的默认模板如下：

<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>

Answer 1

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

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

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

Vue允许组件在任何地方，而不仅仅是在#app中

1 个答案: