Vue入门之自定义事件$emit-父组件获取子组件的数据

前面讲过通过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>