VUE传值问题

普通传值

情景：组件A调用组件B中的数据（将组件B渲染在组件A中）

//组件A
import de from "./default.vue"
export default {
    components:{
        de
    },
     data () {
      return {
        name:'',
        bName:de.data().name
      }
    }
  }
  //组件B
  export default{
    data(){
        return {
            name:'zhangsan'
        }
    }
}

父子传值

1.父传子

<!--父 -----需要用v-bind 绑定数据!-->
 <router-view v-bind:fNum="num" :fMsg="msg"></router-view>

//子
//然后就可以直接调用
 props:['fNum','fMsg'],

2.子传父

//子
  data(){
        return {
            name:'zhangsan',
            msg:'子中数据'
        }
    },
    methods:{
        sendData:function(){
            this.$emit('zhanshi',this.msg)
        }
    }

<!--父接收 -->
<router-view @zhanshi="showFather"></router-view>
 showFather (a) {
      this.sonMsg = a;
      
      console.log('触发了父组件的方法' + '======' + a + '======' + b);
    }

兄弟组件传值

1.第一种方法，组件B和组件C传值，可以通过组件A来连接，方法原理子父传值+父子传值 （缺点比较麻烦）
2.第二种方法，使用eventBus

//main.js 中
export const eventBus = new Vue()
//eventBus 的引用
import {eventBus} from '../main'
//组件B发送数据
 eventBus.$emit('XX', 'xxx') 
//组件C接收数据
 eventBus.$on('XX', (message) => {
         this.msg= message
      })  //注意  这个需要放在组件C的created()生命周期钩子当中

前路漫漫，你我共勉