83 lines
1.4 KiB
Markdown
83 lines
1.4 KiB
Markdown
# 组件
|
||
|
||
组件是带有一个名字的可复用的vue实例，可以在new Vue创建的vue根实例中把定义的组件当做自定义元素来使用
|
||
|
||
### 组件构成
|
||
|
||
组件和new Vue接收的选项相同，都包括如下部分
|
||
|
||
- data
|
||
|
||
- methods
|
||
|
||
- computed
|
||
|
||
- watch
|
||
|
||
- components 组件内可以调用其他组件
|
||
|
||
> el 是根实例特有的选项，组建中不能出现el选项
|
||
|
||
|
||
|
||
### 组件定义和使用：
|
||
|
||
#### 定义一个组件
|
||
|
||
需要把组件实例赋给一个变量
|
||
|
||
```
|
||
let counter=Vue.component('counter', {
|
||
data: function () {
|
||
return {
|
||
count: 0
|
||
}
|
||
},
|
||
methods:{
|
||
add(){
|
||
this.count+=1
|
||
}
|
||
},
|
||
template: '<button v-on:click="add">You clicked me {{ count }} times.</button>'
|
||
})
|
||
```
|
||
|
||
> 声明组件中，组件内部的data必须是一个函数
|
||
>
|
||
> 因此 ，每个组件实例都是彼此独立的
|
||
|
||
使用它：
|
||
|
||
js部分：
|
||
|
||
```
|
||
var app = new Vue({
|
||
el: '#app',
|
||
data: {
|
||
selected: []
|
||
},
|
||
component:{
|
||
counter
|
||
}
|
||
|
||
|
||
})
|
||
```
|
||
|
||
template (html)部分
|
||
|
||
```
|
||
<div id="app">
|
||
<counter></counter>
|
||
<counter></counter>
|
||
<counter></counter>
|
||
<counter></counter>
|
||
|
||
</div>
|
||
```
|
||
|
||
> 组件可以使用任意次数
|
||
>
|
||
> 这个例子中，id=app的部分叫做 父组件 counter指代的部分叫做 子组件
|
||
|