在 Vue 组件内添加子 Vue 组件答案

【问题标题】：Adding child Vue components inside of Vue components在 Vue 组件内添加子 Vue 组件
【发布时间】：2019-03-13 14:44:23
【问题描述】：

我有一个正在正确渲染的 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

【解决方案1】：

你可以这样做，

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'导入简介

【讨论】：

【解决方案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

【讨论】：