37 lines
585 B
Markdown
37 lines
585 B
Markdown
|
组件类似与java中的类(对象)。
|
||
|
|
|
||
|
|
#### 全局组件
|
||
|
|
|
||
|
|
```js
|
||
|
|
Vue.component('component-a', { /* ... */ })
|
||
|
|
Vue.component('component-b', { /* ... */ })
|
||
|
|
Vue.component('component-c', { /* ... */ })
|
||
|
|
|
||
|
|
new Vue({ el: '#app' })
|
||
|
|
```
|
||
|
|
|
||
|
|
```html
|
||
|
|
<div id="app">
|
||
|
|
<component-a></component-a>
|
||
|
|
<component-b></component-b>
|
||
|
|
<component-c></component-c>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
#### 局部组件
|
||
|
|
|
||
|
|
```js
|
||
|
|
var ComponentA = { /* ... */ }
|
||
|
|
var ComponentB = { /* ... */ }
|
||
|
|
var ComponentC = { /* ... */ }
|
||
|
|
|
||
|
|
new Vue({
|
||
|
|
el: '#app',
|
||
|
|
components: {
|
||
|
|
'component-a': ComponentA,
|
||
|
|
'component-b': ComponentB
|
||
|
|
}
|
||
|
|
})
|
||
|
|
```
|
||
|
|
|