Добавление дочерних компонентов Vue внутрь компонентов Vue

У меня есть файл Nav.vue, который отображается правильно, но я хочу сделать так, чтобы в нем был дочерний компонент Nav, который я создал под названием Intro.vue. Как включить это в Nav.vue?

App.js

window.Vue = require('vue');
window.axios = require('axios');


Vue.component('Topbar', 
    require('./components/Nav.vue').default);

new Vue({
    el: "#app"
})

шаблон лезвия

<div id = "app">
  <Nav></Nav>
</div>

Nav.vue

<template>
    <div> Test</div>
</template>
<script>
   export default {

   }
</script

laravel vue.js

13.03.2019 15:44

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Оживление вашего приложения Laravel: Понимание режима обслуживания

Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...

Коллекции в Laravel более простым способом

Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...

Поиск нового уровня в Laravel с помощью MeiliSearch и Scout

Laravel Scout - это популярный пакет, который предоставляет простой и удобный способ добавить полнотекстовый поиск в ваше приложение Laravel. Он...

Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков

В последние годы архитектура микросервисов приобрела популярность как способ построения масштабируемых и гибких приложений. Laravel , популярный PHP...

Как построить CRUD-приложение в Laravel

Laravel - это популярный PHP-фреймворк, который позволяет быстро и легко создавать веб-приложения. Одной из наиболее распространенных задач в...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете импортировать файл Vue под заголовком вашего скрипта в родительский компонент vue и сослаться на него:

<template>
    <div> Test</div>
    <nav-component></nav-component>
</template>

<script>
  import NavComp from './Nav.vue'; //specify correct file location

  export default {
    components:{
        'nav-component': NavComp
    }
  }
</script

13.03.2019 16:02

Ответ принят как подходящий

Вы можете сделать это следующим образом,

Nav.vue

<template>
    <intro></intro>
</template>
<script>

   import Intro from 'path/to/your/component/from/nav'
   export default {

       components:{
           'intro':Intro
       }
   }
</script>

Скажем, если ваш Intro.vue находится в том же каталоге, что и Nav.vue, тогда оператор импорта должен выглядеть так:

импортировать интро из './Intro'

13.03.2019 16:11