Vue 允许在任何地方使用组件，而不仅仅是在#app
Posted
技术标签:
【中文标题】Vue 允许在任何地方使用组件，而不仅仅是在#app【英文标题】：Vue allow components anywhere, not just in #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 这似乎解决了问题，谢谢！
我继续并将其发布为答案，因为这是解决方案。
【参考方案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>
【讨论】：
以上是关于Vue 允许在任何地方使用组件，而不仅仅是在#app的主要内容，如果未能解决你的问题，请参考以下文章
显示 SVG 图标的 Angular 可重用组件的宽度/高度未在任何地方设置并位于图标正下方，stackblitz 内部