局部注册
先用一个普通的 JavaScript 对象来定义组件:
- var ComponentA = { /* ... */ }
- var ComponentB = { /* ... */ }
然后在 components 选项中定义你想要使用的组件:
- new vue({
- el: '#app',
- components: {
- 'component-a': ComponentA,
- 'component-b': ComponentB
- }
- })
对于 components 对象中的每个属性来说, 其属性名就是自定义元素的名字, 其属性值就是这个组件的选项对象.
注意局部注册的组件在其子组件中不可用. 例如, 如果你希望 ComponentA 在 ComponentB 中可用, 则你需要这样写:
- var ComponentA = { /* ... */ }
- var ComponentB = {
- components: {
- 'component-a': ComponentA
- },
- // ...
- }
或者如果你通过 Babel 和 webpack 使用 ES2015 模块, 那么代码看起来更像:
- import ComponentA from './ComponentA.vue'
- export default {
- components: {
- ComponentA
- },
- // ...
- }
来源: http://www.bubuko.com/infodetail-3235709.html