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指代的部分叫做 子组件
|
|||
|
|
|