vue 2 组件通信

vue1的

$dispatch 和 $broadcast 已经被弃用。请使用更多简明清晰的组件间通信和更好的状态管理方案，如：Vuex。

以下网上找到vue2组件通信方式，已尝试过

父与子组件通信

1.bus 父<->子

bus.js

import Vue from 'vue'

export default new Vue()

子

<template>

    <div>

    </div>

</template>

<script>

import Bus from '../../common/bus’

export default {

    created(){

        Bus.$on('onbus',function(cb){

            cb&&cb()

            console.log('onbus')

        })

    }   

}

父

<template>

    <div>

        <button @click="submit()">提交</button>

    </div>

</template>

<script>

import Bus from '../../common/bus’

export default {

    methods:{

        submit:function(){

            Bus.$emit('onbus',function(){

                console.log('buscb')

            })

        }

    } 

}

2.ref 父->子

子

<template>

  <div>

  </div>

</template>

<script>

export default {

    name: 'demo',

    methods: {

        sub() {

        console.log('sub');

        },

    },

};

</script>

父

<template>

  <div>

  <component ref="demo"></component>

  </div>

</template>

<script>

import component from '../components/components';

export default {

  name: 'demoFu',

  components: {

    component,

  },

  mounted() {

    this.$refs.demo.sub();

  },

};

</script>

<style>

</style>

3. emit 父<-子

子

this.$emit('componentData')

父

<component @componentData="getData"></component>