vue组件间(父传子，子传父，兄弟组件)通信方式

1、父传子：使用props

使用规则：组件内部通过props接收传过来的值，props传递数据原则：单向数据流（只允许父组件向子组件传递数据，不允许子组件直接操作props中的数据）

<!--父组件内容-->
<div id="app">
    <div>{{pmsg}}</div>
    <!--父组件通过属性绑定将值传递给子组件-->
    <menu-con :me-con="hhh"></menu-con>
</div>
<script type="text/javascript">
    /*
    * 父组件向子组件传值：使用props属性
    * 组件内部通过props接收传过来的值
    */
    // 子组件内容，通过props属性接收父组件传过来的值，并显示
    Vue.component('menu-con',{
       props:['meCon'],
       template: '<div>{{meCon}}</div>'
    });
    var vm=new Vue({
        el:'#app',
        data:{
            pmsg:'父组件内容'
            hhh:'哈哈哈哈'
        }
    })
</script>

2、子组件向父组件传值

使用$emit事件绑定方式

<!-- 父组件内容 -->
<div id="app">
    <meun-item  :parr="parr" @enlarge-text="handle($event)" ></meun-item>
</div>
<template id="box">
	<!--子组件内容-->
    <div>
        <!--  用自定义事件向父组件传递信息 -->
        <button @click="$emit('enlarge-text',10)">扩大父组件中字体大小</button>
    </div>
</template>
<script type="text/javascript">
    //props传递数据原则：单向数据流（只允许父组件向子组件传递数据,不允许子组件直接操作props中的数据）
    Vue.component('meun-item',{
       template:'#box',
    });
    var vm=new Vue({
        el:'#app',
        data:{
            pmsg:'父组件内容',
            fontSize:10,
        },
        methods:{
            handle:function (val){
                this.fontSize+=val
            }
        }
    })
</script>

3、兄弟组件传值方式（三种）

1. 使用props+$emit方式，子->父->子

// 父组件内容
<template>
  <div class="parent">
    <p>parent：{{name}}</p>
    <child-one :name="name" @handleClick = 'handleClickya'></child-one>
    <child-two :name="name"></child-two>
  </div>
</template>
<script>
import ChildOne from '../components/Child1'
import ChildTwo from '../components/Child2'
export default {
  components: {
    ChildOne,
    ChildTwo
  },
  data(){
    return {
      name: 'aaa'
    }
  },
  methods: {
   handleClickya(name) {
      this.name = name
    } 
  }
}
</script>

子组件

<template>
  <div class="">
    <div>
      <button @click="handleChildOneClick">button</button>
      <p>props+$emit child1:{{myName}}</p>
    </div>
  </div>
</template>
<script>
import { eventBus } from '../main'
export default {
  props: ['name'],
  data(){
    return {
      myName: this.name
    }
  },
  methods: {
    handleChildOneClick(){
      // 使用props 和 $emit方式，子->父->子，子组件和父组件的name值都会变成ff
      this.$emit('handleClick', 'ff')
    }
  }
}
</script>

2. 使用EventBus
首先要在main.js中导出一个vue实例

export const eventBus = new Vue()

在父组件中引用

<template>
  <div class="">
    <p>parent：{{name}}</p>
    <child-one :name="name"></child-one>
    <child-two :name="name"></child-two>
  </div>
</template>
<script>
import ChildOne from '../components/Child1'
import ChildTwo from '../components/Child2'
export default {
  components: {
    ChildOne,
    ChildTwo
  },
  data(){
    return {
      name: 'aaa'
    }
  },
  methods: {
  }
}
</script>

在子组件1中

<template>
  <div class="">
    <div>
      <button @click="handleChildOneClick">button</button>
      <p>eventbus child1:{{myName}}</p>
    </div>
  </div>
</template>
<script>
import { eventBus } from '../main'
export default {
  props: ['name'],
  data(){
    return {
      myName: this.name
    }
  },
  methods: {
    handleChildOneClick(){
      // 使用event bus方式
      this.myName = 'cc'
      eventBus.$emit('ChildOneClick', 'cc')
    }
  }
}
</script>

在子组件2中

<template>
  <div class="">
    <div>>
      <p>eventbus child2:{{myName}}</p>
    </div>
  </div>
</template>

<script>
import { eventBus } from '../main'
export default {
  props: ['name'],
  data(){
    return {
      myName: this.name
    }
  },
  created(){
  // 使用$on接收子组件1传过来的事件及数据，并修改
    eventBus.$on('ChildOneClick', (name) => {
      this.myName = name
    })
  }
}
</script>

3. 使用vuex通信方式
首先在store底下的index.js中设置数据

export default new Vuex.Store({
  state: {
    name: 'ddd'
  },
  // 不要在mutations中执行异步代码
  // 只有mutations中定义的函数才有权力修改state中的数据
  mutations: {
    changeName(state) {
      state.name = 'eee'
    }
  }
})

在main.js中挂载

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在父组件中

<template>
  <div class="">
    <p>parent：{{name}}</p>
    <child-one :name="name"></child-one>
    <child-two :name="name"></child-two>
  </div>
</template>

<script>
import ChildOne from '../components/Child1'
import ChildTwo from '../components/Child2'
export default {
  components: {
    ChildOne,
    ChildTwo
  },
  data(){
    return {
      name: 'aaa'
    }
  }
}
</script>

在子组件1中

<template>
  <div class="">
    <div>
      <button @click="handleChildOneClick">button</button>
      <p> vuex child1:{{$store.state.name}}</p>
    </div>
  </div>
</template>

<script>
import { eventBus } from '../main'
export default {
  props: ['name'],
  data(){
    return {
      myName: this.name
    }
  },
  methods: {
    handleChildOneClick(){
      // 使用vuex通信
      this.$store.commit('changeName')
    }
  }
}
</script>

在子组件2中

<template>
  <div class="">
    <div>
      <p> vuex child2:{{$store.state.name}}</p>
    </div>
  </div>
</template>

<script>
import { eventBus } from '../main'
export default {
  props: ['name'],
  data(){
    return {
      myName: this.name
    }
  }
}
</script>

ps：使用第一种方式，父组件的name值也会随之改变，而使用后面两种方式时，不会改变父组件的值。