vue组件之间的通信

第一种：父组件向子组件传值利用props

Vue.component('my-father', {
      template: `
        

          王健林
          
          
        `,
      components: {
        'my-son': {
          template: `
            
王思聪--{{money}}
            `,
          props: ['money']
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });

第二种：子组件向父组件传值利用$emit

Vue.component('my-father', {
      template: `
        

          王健林
          
          
        `,
      methods: {
        handle(num) {
          console.log(num);
        }
      },
      components: {
        'my-son': {
          template: `
            

              王思聪
              
            `,
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });

第三种：兄弟组件之间的传值利用eventBus

/*通过自定义事件，创建一个vue实例 var eventBus = new Vue(),
 在需要通信的组件中，触发事件组件使用 eventBus.$emit('change', data)，
监听组件在created（mounted）时使用 eventBus.$on('change', fn)，
并在beforeDestroy中调用eventBus.$off('change', fn)进行解绑，防止内存泄露 */
var eventBus = new Vue();

    Vue.component('my-father', {
      template: `
          

            爸爸
            销毁
            
            
            
        `,
      methods: {
        fn1() {
          this.$destroy()
        }
      },
      components: {
        'my-son1': {
          template: `
            
大儿子
            `,
          created() {
            eventBus.$on('myclick', (msg) => {
              console.log(msg);
            })
          },
          beforeDestroy() {
            console.log('销毁前')
            eventBus.$off('myclick')
          }
        },
        'my-son2': {
          template: `
            
小儿子
            `,
          methods: {
            fn() {
              eventBus.$emit('myclick', 123)

            }
          }
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });

第四种：vuex
第五种：跨组件传值

Vue.component('my-sub1',{
      template:'#my-sub1',
      data() {
        return {
          money: 10000000
        }
      },
      provide:{
        money:1000
      },
      components:{
        'sub-a':{
          template:'
子组件
',
          components:{
            'sub-b':{
              template:'
子组件{{money}}
',
              inject:['money']
            }
          }
        }
      }
    })
    new Vue({
      el: '#app'
    })