一、子组件获取父组件的数据
1、通过父组件给子组件传值的方法，子组件用props接受数据；
2、子组件通过this.$parent 获取父组件的数据；
多的不说少的不唠我们直接把车开起来，项目中经常用不一定面试的时候就能说清楚!
// 子组件Child.vue
<template>
<div class="Child.vue">
<span>{{mesData}}</span>
</div>
</template>
<script>
export default {
props: ['mesData'],//方法一：数据必须要从父组件传递
mounted(){
console.log(this.$parent)//方法二：直接在子组件获取信息
}
}
</script>
//父组件 Parent.vue
<template>
<div class="Parent.vue">
<!--通过自定义的mesData向子组件传值 属于方法一-->
<Child :mesData="mes"></Child>
</div>
</template>
<script>
import Child from './Child'
export default {
data(){
return {
mes:'传递给子组件'
}
}
}
</script>
二、子组件将信息反馈给父组件
1、子组件$emit就可以触发自定义事件event 将数据发送给父组件，父组件用@event来监听；多的不说少的不唠我们直接开车
// 子组件Child.vue
<template>
<div class="Child">
<div @click="sendData">点击</div>
</div>
</template>
<script>
export default {
methods:{
sendData(){
this.$emit('event','这是子组件通过事件发送传递的数据')
}
}
}
</script>
//父组件 Parent.vue
<template>
<div class="Parent">
<Child @event="acceptData"></Child>
</div>
</template>
<script>
import Child from './Child'
export default {
data(){
return {
}
},
methods:{
acceptData(data){
console.log(data)//这是子组件通过事件发送传递的数据
}
}
}
</script>
三、兄弟组件之间的通信
1、兄弟组件之间的通信主要通过老大事件发送$emit和老二事件监听$on，在借助中央桥解决他们之间的沟通问题
//中央桥文件vueEvent.js 这个实例就承担起了组件之间通信的桥梁了，也就是中央事件总线
import Vue from 'vue';
var vm = new Vue();
export default vm;
// 兄弟组件A BrotherA.vue
<template>
<div class="BrotherA">
<div @click="sendData">点击</div>
</div>
</template>
<script>
import vm from '@/utils/vueEvent'
export default {
methods:{
sendData(){
vm.$emit('event','组件A给组件B发送信息')
}
}
}
</script>
// 兄弟组件B BrotherB.vue
<template>
<div class="BrotherB">
</div>
</template>
<script>
import vm from '@/utils/vueEvent'
export default {
mounted(){
vm.$on('event',function(data){
console.log(data)//组件A给组件B发送信息
})
}
}
</script>
//父组件 Parent.vue
<template>
<div class="Parent">
<BrotherA></BrotherA>
<BrotherB></BrotherB>
</div>
</template>
<script>
import BrotherA from './BrotherA'
import BrotherA from './BrotherB'
export default {
}
</script>
以上是本人经常使用的方法，相信还有别的方法！车已开完!
