This commit is contained in:
luyuan 2020-12-24 09:36:10 +08:00
commit 74e6f8295e
Signed by: theluyuan
GPG Key ID: A7972FD973317FF3
6 changed files with 196 additions and 12 deletions

82
vue/组件.md Normal file
View File

@ -0,0 +1,82 @@
# 组件
组件是带有一个名字的可复用的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指代的部分叫做 子组件

94
vue/组件间通信.md Normal file
View File

@ -0,0 +1,94 @@
# 组建间通信
### 父组件往子组件传值prop
子组件中使用prop 定义从父组件接收的值
父组件调用子组件时, 子组件prop里面定义的值就变成了父组件从实例 template部分变成属性
props语法
- 对象格式定义
props:{
属性名:{
type 数据类型
default: 默认值
}
}
```
<div id="app">
<counter msg="父组件传过来的值1"></counter>
<counter msg="父组件传过来的值2"></counter>
<counter msg="父组件传过来的值3"></counter>
<counter msg="父组件传过来的值4"></counter>
</div>
<script>
let counter=Vue.component('counter', {
data: function () {
return {
count: 0
}
},
props:{
msg:{
type:String
}
},
methods:{
add(){
this.count+=1
}
},
template: '<div>{{msg}}</div>'
})
var app = new Vue({
el: '#app',
component:{
counter
}
})
</script>
```
- 数组格式定义Props
props: ['属性名'],
上面的Props重新定义为
```
props:['msg']
```
### 子组件往父组件传值($emit
在子组件的template部分中触发事件事件处理函数内部 写入
```
this.$emit('drag<监听这个事件的所用的名称>',要传的值)
```
然后从父组件的template部分做如下处理
```
<counter @timend="end"><counter>
其中 timeend 是监听这个end这个时间所用的名称
end是触发timeend之后的处理函数名
```

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -153,10 +153,13 @@ v-model为不同的输入元素使用不同的property并抛出不同的事件
``` ```
<div id="example-6"> <div id="example-6">
<select v-model="selected" multiple style="width: 50px;"> <select v-model="selected" multiple="multiple" style="width: 50px;">
<option>A</option> <option>A</option>
<option>B</option> <option>B</option>
<option>C</option> <option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
</select> </select>
<br> <br>
<span>Selected: {{ selected }}</span> <span>Selected: {{ selected }}</span>
@ -172,4 +175,9 @@ v-model为不同的输入元素使用不同的property并抛出不同的事件
}) })
``` ```
选择前:![image-20201223141638119](表单输入绑定v-model.assets/image-20201223141638119.png)
选择后:![image-20201223141710470](表单输入绑定v-model.assets/image-20201223141710470.png)
使用时需要按ctrl选中多个