95 lines
1.8 KiB
Markdown
95 lines
1.8 KiB
Markdown
# 组建间通信
|
||
|
||
### 父组件往子组件传值（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之后的处理函数名
|
||
```
|
||
|