# 组建间通信

### 父组件往子组件传值（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之后的处理函数名
```