vue 组件传值---父子组件之间的传值

在Vue中，父子组件的关系可以总结为props向下传递，事件向上传递。父组件通过props给子组件下发数据，子组件通过事件（$emit）给父组件发送信息。

1.父组件向子组件传值props

1.1子组件

先定义一个子组件，在组件中注册props

如果需要从父组件中获得message的值，需要props:[message]，此时是当不需要检测是否是string类型时的写法，在props中添加了元素后，就不需要在data中再添加变量了。

props: ["dictTypeId"],//传字符串格式的这样写（上面写法一般是传对象这种复杂的格式字段）

1.2父组件

在父组件中，引入子组件，并传入子组件内需要的值
在调用组件的时候，使用v-bind将message的值绑定为父组件中定义的变量parentMsg

2.子组件向父组件传值$emit

子组件主要通过事件向父组件传值

2.1父组件

父组件在组件上定义了一个自定义事件childFn，事件名为parentFn用于接受子组件传过来的message值。
父组件中声明了一个方法parentFn，，用childFn事件调用这个方法，获得从子组件传过来的参数message。
Methods下的parentFn方法中的参数payload就是从子组件传递过来的参数message。

2.2子组件

子组件是一个buttton按钮，并为其添加了一个click事件，当点击的时候使用$emit()触发事件，把message传给父组件。
在子组件的HTML中，当input发生变化时，将message的值传给父组件，首先在button按钮上声明了一个方法click（后面的那个），用click（前面的）事件来调用。
在methods下的click中，使用了$emit来遍历childFn事件，并返回this.message，其中childFn是一个自定义的事件，功能类似于中转站，this.massage将通过这个事件传给父组件。

还可参考其他：组件传值
更全的传值方式：
Vue2.0的八种常用传值方式、父传子、子传父、非父子组件传值（最完整）