Блог

Главная - Вопросы по программированию - Как мне внедрить компоненты Vue / Vuetify в другие компоненты Vue / Vuetify в Laravel?

Как мне внедрить компоненты Vue / Vuetify в другие компоненты Vue / Vuetify в Laravel?

#laravel #vuejs2 #vuetify.js

#laravel #vuejs2 #vuetify.js

Вопрос:

В начале этого года я поставил перед собой цель изучить Laravel, Vue и Vuetify, ни один из которых я ранее не использовал. Это оказалось довольно сложно, поскольку большинство руководств и видеороликов для Laravel не касаются Vue, большинство материалов для Vue не касаются использования Vue в Laravel, и ни в одном из материалов, которые я нашел до сих пор, не обсуждается, как использовать Vuetify в среде Laravel с использованием компонентов Vue. Это означает, что очень сложно найти ответы на некоторые из моих вопросов. Теперь Vue работает в Laravel, а Vuetify работает на базовом уровне, но я все еще борюсь с некоторыми основами.

В частности, я пытаюсь выяснить, как создать компонент Vue, который использует Vuetify в Laravel, для внедрения другого компонента Vue в Laravel. У меня есть базовый список дел, который работает достаточно хорошо, когда все в одном компоненте Vue. Мне интересно, возможно ли разместить, например, мой логотип (в v-образной панели инструментов) и нижний колонтитул в отдельных компонентах Vue (которые используют Vuetify), а затем внедрить их обратно в основной компонент?

Если это возможно, как это будет выглядеть? Я попытался поместить свой логотип (который представляет собой v-образную панель инструментов) в свой собственный компонент, но у меня возникли проблемы с его правильной регистрацией.

Вот мой компонент, называемый Logo.vue:

 <template>
    <v-toolbar dark src="images/fence.jpg" max-height="60">
    <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-height="60"
    >
      <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.