如何在 Laravel 的其他 Vue/Vuetify 组件中嵌入 Vue/Vuetify 组件？

Posted 2023-02-23

【中文标题】如何在 Laravel 的其他 Vue/Vuetify 组件中嵌入 Vue/Vuetify 组件？

【英文标题】：How do I imbed Vue/Vuetify components within other Vue/Vuetify components within Laravel?

【发布时间】：2021-03-27 15:52:21

【问题描述】：

今年初我给自己定了一个目标，学习 Laravel、Vue 和 Vuetify，这些我以前都没有使用过。这已被证明是相当困难的，因为 Laravel 的大多数教程和视频都没有涉及 Vue，大多数 Vue 材料都没有涉及如何在 Laravel 中使用 Vue，而且到目前为止我找到的材料都没有讨论如何使用使用 Vue 组件在 Laravel 环境中进行 Vuetify。这意味着很难找到我的一些问题的答案。我现在在 Laravel 中使用了 Vue，也让 Vuetify 在基本级别上工作，但我仍在为某些基础知识而苦苦挣扎。

具体来说，我试图弄清楚如何制作一个在 Laravel 中使用 Vuetify 的 Vue 组件，以在 Laravel 中嵌入 另一个 Vue 组件。我已经编写了一个基本的待办事项列表 CRUD，它在一个 Vue 组件中运行得相当好。我想知道是否可以在单独的 Vue 组件（使用 Vuetify）中分别拥有我的 Logo（在 v-toolbar 中）和页脚，然后将它们嵌入到主组件中？

如果它是可能的，它会是什么样子？我尝试将我的徽标（它是一个 v-toolbar）放在它自己的组件中，但我无法正确注册它。

这是我的组件，名为 Logo.vue：

<template>
    <v-toolbar dark src="images/fence.jpg" max->
    <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-toolbar-title>Different Logo</v-toolbar-title>
    </v-toolbar>
</template>

<script>
export default  

</script>

<style scoped>
</style>

这是我的主要组件，称为 VuetifyComponent.vue，大部分主体被剥离，因为它无关紧要：

<template>
  <v-app>

    <v-toolbar
      dark
      src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
      max-
    >
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-toolbar-title>LaraVuetify To Do List</v-toolbar-title>

    </v-toolbar>

    <Logo></Logo>

  </v-app>
</template>

这是我的 app.js 尝试注册两个组件：

require('./bootstrap');

window.Vue = require('vue');

import Form from './Form'
window.Form = Form

import Vuetify from 'vuetify'
Vue.use(Vuetify);
    
Vue.component('vuetify-component', require('./components/VuetifyComponent.vue').default);
Vue.component('Logo', require('./components/Logo.vue').default);

const app = new Vue(
    el: '#app',
    vuetify: new Vuetify()
);

这是来自我的浏览器的消息：

[Vue warn]: Unknown custom element: <Logo> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VuetifyComponent> at resources/js/components/VuetifyComponent.vue
       <Root>

【参考方案1】：

原来我做错了一件小事。 logo 组件应该使用小写的“logo”而不是“Logo”注册，换句话说：

Vue.component('logo', require('./components/Logo.vue').default);

我的 VuetifyComponent 中的标签应该是 <logo></logo>。

通过这些微小的更改，我已经证明即使两个 Vue 组件都使用 Vuetify 并且两个组件都在 Laravel 中，我也可以将一个组件嵌入到另一个组件中。