javascript Vue - 在其他组件中使用组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49873726/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue - Using component inside other component
提问by Meet Zaveri
I am trying to use a search-bar componentinside my home.vuecomponent but I can't figure out why its not working.
我正在尝试search-bar component在我的home.vue组件内部使用 a但我不知道为什么它不起作用。
Folder structure
文件夹结构
App.vue
components
home.vue
query.vue
common
HeaderBar.vue
SideBar.vue
SearchBar.vue
App.vue
应用程序
script
脚本
import HeaderBar from './components/common/HeaderBar'
import SideBar from './components/common/SideBar'
export default {
name: 'App',
components: {
HeaderBar,
SideBar
},
html
html
<template>
<div id="app">
<HeaderBar></HeaderBar>
<SideBar></SideBar>
<main class="view">
<router-view></router-view>
</main>
</div>
</template>
This above works just fine.
上面这个工作得很好。
Home.vue
主页.vue
script
脚本
import SearchBar from './common/SearchBar'
export default {
name: 'Home',
components: SearchBar
}
html
html
<template>
<section class="home">
<div class="hero-content">
<h1>Hello World</h1>
<SearchBar></SearchBar>
</div>
</section>
</template>
I get those errors:
我收到这些错误：
[Vue warn]: Invalid component name: "_compiled". Component names can only contain alphanumeric characters and the hyphen, and must start with a letter.
[Vue warn]: Invalid component name: "__file". Component names can only contain alphanumeric characters and the hyphen, and must start with a letter.
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Home> at src\components\Home.vue <App> at src\App.vue <Root>
[Vue 警告]：无效的组件名称：“_compiled”。组件名称只能包含字母数字字符和连字符，并且必须以字母开头。
[Vue 警告]：无效的组件名称：“__file”。组件名称只能包含字母数字字符和连字符，并且必须以字母开头。
[Vue 警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。
在发现
---> <Home> at src\components\Home.vue <App> at src\App.vue <Root>
回答by Meet Zaveri
By default you have to use it with kebab-casein templatetag.
默认情况下，你必须与使用它的烤肉串情况的template标签。
Register component as of PascalCasenotation. Use it in component with kebab-casenotation. Simple as that!
按照PascalCase表示法注册组件。在带有kebab-case符号的组件中使用它。就那么简单！
Case 1 : Default
情况 1：默认
<template>
<section class="home">
<div class="hero-content">
<h1>Hello World</h1>
<search-bar></search-bar>
</div>
</section>
</template>
<script>
import SearchBar from './common/SearchBar'
export default{
components: SearchBar
}
</script>
Case 2 : Customized
案例2：定制
Or you want to register it with your way(by applying custom name) just change this code :
或者你想用你的方式注册它（通过应用自定义名称）只需更改此代码：
export default{
components: {
'search-bar' : SearchBar
}
}
回答by Kevin Law
Script of Home.vueshould be like following
Home.vue 的脚本应该如下
import SearchBar from './common/SearchBar'
export default {
name: 'Home',
components: {
'SearchBar': SearchBar
}
}
If you SearchBar component already have a name property values SearchBar, the 'SearchBar'filed name could be reduant.
如果您的 SearchBar 组件已经有一个名称属性值SearchBar，则'SearchBar'字段名称可能是重复的。
