vue组件通信

对于子组件将数据传给父组件，是通过$emit事件来实现的。在父组件中绑定一个listenOne的事件，然后给这个事件添加getCompomentOne方法，当子组件children-one通过点击事件tellParent触发listenOne的时候，父组件里面的getCompomentOne方法就会执行，并且数据通过参数的形式传递给父组件，从而实现通信的功能。

父组件

<template> 
     <div class="components-bus-container">
        <child :fatherDataOne="fatherDataOne" @listenOne='getCompomentOne'></child>
     </div> 
</template>

<script>
import child from './page/child.vue'
export default {
  data() {
      return {
          fatherDataOne: '',
      };
  },
  methods: {
    getCompomentOne(param) {
      console.log(param);
    }
  },
  components:{
    child,
  }
}
</script>

子组件

<template>
    <div class="children-one-content">
        <div>{{fatherDataOne}}</div>
        <div @click="tellParent">点击传递数据</div>
    </div>
</template>

<script>
export default {
    name:'child',
    data() {
        return {};
    },
    props: ['fatherDataOne'],
    methods: {
        tellParent() {
          this.$emit('listenOne', 'from childrenOne');
        }
    }
}
</script>