父子组件传值可以通过 $emit和props , eventbus, vuex等
子组件向父组件传值
子组件向父组件传值利用的是 $emit
假设我们的父组件为
<app></app>
里面嵌套了子组件：
1. <app> 2. <child></child> 3. </app
假设子组件的内容为：
1. <div> 2. <p>我是子组件</p> 3. <p>{{message}}</p> 4. <button></button> 5. </div>
我们想当点击按钮时将子组件中 message 的内容传递给父组件：
1. 在子组件中
为 button 绑定 click 事件
<button @click="submit()"></button>
当触发点击事件时,在函数中使用 $emit
submit () { this.$emit('childFn',this.message) }
其中 $emit 中的两个参数，第一个为父组件的事件，第二个为想要传的值
2. 在父组件中
在引用子组件的位置，写入事件：
<app> <child @childFn="parentFn"></child> </app>
在 parentFn() 函数中，写入传的参数，获取子组件中 message 的值：
parentFn (message) { this.getMessage = message }
这样就将子组件中的 message 值存到了父组件中的 getMessage 中了。
父组件向子组件传值
父组件向子组件传值利用的是 props
假设我们的父组件为：
<app></app>
里面嵌套了子组件：
<app> <child></child> </app>
假设子组件的内容为：
<div> <p>我是子组件</p> <p>{{childMessage}}</p> <button></button> </div>
我们想将从父组件中获取的内容放置在message的位置上：
1. 在子组件中
增加 props :
export default { props: ['childMessage'], data () { return { ... } }
2. 在父组件中
为嵌套的子组件绑定传的值：
<app> <child :childMessage="parentMessage"></child> </app>
其中，parentMessage为父组件中 data 里的值：
export default { data () { return { parentMessage: '我是来自父组件的值' } }
以上，就可以将父组件中 parentMessage中的值传递给子组件childMessage中，并显示在 {{childMessage}}的位置上。
