Question

我有一个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>

Answer 1

您可以按照以下步骤进行操作，

导航

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

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

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

如果您的Intro.vue与Nav.vue位于同一目录，那么import语句应类似于

从'./Intro'导入简介

Answer 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

在Vue组件内部添加子Vue组件

2 个答案: