前面讲过通过props子组件很容易就可以获取到父组件的数据，但是父组件怎么获取子组件的数据呢？通过查资料，发现可以通过自定义事件来实现父组件与子组件之间的通信。
首先，得创建一个子组件模板文件，子组件在父组件中用的时候，总得有个触发动作可以获取到子组件的数据吧，所以，加个按钮，触发个动作。如下所示：
1.子组件
然后再子组件中定义下数据，不然父组件没有数据可以获取
2.子组件
点击button时，将子组件的数据发送给父组件，这时需要用到$emit
3.子组件
然后，在父组件中首先要引入子组件
4.父组件
5.父组件
接收完数据后，就在页面上渲染展示
6.父组件
结果：
7.结果
最后，把代码贴出来：
child.vue
<template>
<div>
<button @click="emitData">点我获取子组件的数据哦</button>
</div>
</template>
<script>
export default {
data () {
return {
child_data: '我是你的孩子哦'
}
},
methods: {
emitData () {
this.$emit('child-event', this.child_data)
}
}
}
</script>
App.vue
<template>
<div>
<v-child @child-event="getBData"></v-child>
{{child_data}}
</div>
</template>
<script>
import child from './components/child.vue'
export default {
data () {
return {
child_data: ''
}
},
components: {
'v-child': child
},
methods: {
getBData (param) {
this.child_data = param
}
}
}
</script>
