webpack & vuejs 将组件包含到组件中

Posted 2023-02-22

【中文标题】webpack & vuejs 将组件包含到组件中

【英文标题】：webpack & vuejs include component into component

【发布时间】：2018-07-05 08:28:03

【问题描述】：

我正在使用 webpack 和 vuejs。

但是当我尝试在其他组件中添加一些组件时，我不能。

例如rounter/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。

工具.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>

但我不能在Tools 组件中包含toolsmenu 组件。 现在如何将toolsmenu 包含到Tools 中。

【参考方案1】：

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

工具.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://vuejs.org/v2/guide/components.html

【讨论】：

感谢您的指导和参考。

【参考方案2】：

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

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