gpt4 book ai didi

javascript - Vue 允许在任何地方使用组件,而不仅仅是在 #app 中

转载 作者:行者123 更新时间:2023-12-02 22:22:44 28 4
gpt4 key购买 nike

现在我正在使用以下内容设置我的 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>

列表俱乐部.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>

最佳答案

我看到您正在从 vue-class-component 导入 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>

关于javascript - Vue 允许在任何地方使用组件,而不仅仅是在 #app 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59178002/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com