Webpack和Vue.js：将组件包含到组件中。

Question

我使用 webpack 和 vuejs。

但是当我尝试在另一个组件中添加一些组件时，无法实现。

例如 router/index.js：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Tools from '@/components/Tools' 
//import toolsmenu from '@/components/toolsmenu' 


export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Tools',
      name: 'Tools',
      component: Tools
    }
  ]
})

然后在组件文件夹中： HelloWorld，Tools，toolsmenu。

Tools.vue:

<template>
    <div>
       <toolsmenu></toolsmenu>
       my code
    </div>
</template>
<script>
    export default {
        name: 'Tools'
    }
</script>

toolsmenu.vue:

<template>
    <ul>
        <li> <a href="#"> index </a> </li>
    </ul>
</template>
<script>
    export default {
        name: 'toolsmenu'
    }
</script>

但是我无法在“工具”组件中包含“toolsmenu”组件。现在，我该如何将“toolsmenu”组件包含到“工具”中呢？

- A1Gard

Answer 1

您需要将toolsmenu注册为Tools的一个组件：

<template>
    <div>
       <toolsmenu></toolsmenu>
       my code
    </div>
</template>
<script>
    import toolsmenu from '@/components/toolsmenu';
    export default {
        name: 'Tools',
        components: {
            toolsmenu
        }
    }
</script>

- dvnguyen

Answer 2

首先在Tools组件中注册toolsmenu组件

Tools.vue

<template>
    <div>
       <toolsmenu></toolsmenu>
       my code
    </div>
</template>
<script>
 import Vue from 'vue'
 import toolsmenu from './toolsmenu.vue'

 // register component
 Vue.component('toolsmenu', toolsmenu)
 export default {
  name: 'Tools'
 }
</script>

参考文献: https://v2.vuejs.org/v2/guide/components.html

- yussan

---

感谢您的指导和参考。 - A1Gard