css 组件未定义，Vue

fkaflof6 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(120)

未定义Vue组件：在我将按钮从index.blade.php移动到FollowButton.vue，vue 3，laravel 8之后，它显示在控制台日志中。你可以看到下面的代码。
这里是app.js

import { createApp } from 'vue';

components.forEach(component => app.component(component.name, component))

const app = createApp({}).component(
  'follow-button',
  require('./components/FollowButton').default
);

app.mount('#app');

这里是FollowButton.vue

<template>
  <div>
    <button class="btn btn-primary ml-4" >Follow</button>
  </div>
</template>

<script>
  export default {
    mounted() {
      console.log('Component mounted.')
    }
  }
</script>

css

来源：https://stackoverflow.com/questions/76523156/component-is-not-defined-vue

1条答案

按热度按时间

vvppvyoh1#

代码反射

您使用const app = createApp({})创建了一个空应用。在这个空的应用程序中，您使用app.component('follow-button', FollowButton)声明了follow-button组件。
现在，您想要使用该组件，但是没有这样做的地方，因为您创建的应用程序是“空的”，如空对象{}所示。

方案一

相反，您可以创建一个App.vue文件，作为Vue应用程序的基础：const app = createApp(App)。
Vue Playcode for Example

// app.js

import { createApp } from 'vue';
import App from './App.vue';
import FollowButton from './components/FollowButton.vue';

const app = createApp(App);

app.component('follow-button', FollowButton);

app.mount('#app');

<!-- App.vue - Example... -->
<template>
  <h1>Hello Vue 3</h1>
  <follow-button />
</template>

方案二

或者，您可以简单地声明一个template，其中可以使用follow-button组件。
Vue Playcode for Example

// app.js

import { createApp } from 'vue';
import FollowButton from './components/FollowButton.vue';

const app = createApp(FollowButton);

app.mount('#app');

赞(0）回复(0）举报 2023-06-25

我来回答

css 组件未定义，Vue

1条答案

代码反射

方案一

方案二

相关问题

热门标签

最新问答