对于子组件将数据传给父组件，是通过$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>
