[英]webpack & vuejs include component into component
我正在使用 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>
工具菜单.vue:
<template>
<ul>
<li> <a href="#"> index </a> </li>
</ul>
</template>
<script>
export default {
name: 'toolsmenu'
}
</script>
但在我不能在工具组件中包含Tools
toolsmenu
组件。 现在如何将toolsmenu
包含到Tools
中。
您需要将toolsmenu
注册为Tools
的一个组件:
<template>
<div>
<toolsmenu></toolsmenu>
my code
</div>
</template>
<script>
import toolsmenu from '@/components/toolsmenu';
export default {
name: 'Tools',
components: {
toolsmenu
}
}
</script>
您首先在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 ://v2.vuejs.org/v2/guide/components.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.