vuejs如何实现兄弟组件传参

vuejs如何实现兄弟组件传参，下面web建站小编给大家详细介绍一下实现代码！

实现代码如下；

<div id="app">
  //父级状态
  <p>{{state}}</p>
  <c1 @test_c1='changeA'></c1>
  <c2 :test_c2='state'></c2>
</div>
 
<template id="c1">
  <div>这里是c1组件
    <button @click='changeB'>c1按钮</button>
  </div>
</template>
 
<template id="c2">
  <div>这里是c2组件,状态：{{test_c2}}
    <div v-show='test_c2'>我是c2中的div</div>
  </div>
</template>
 
<script src='../vue/vue.js'></script>
<script>
Vue.component("c2",{
  template:"#c2",
  props:['test_c2']
})
 
Vue.component("c1",{
  template:"#c1",
  methods:{
    changeB(){
      this.$emit("test_c1")
    }
  }
})
 
new Vue({
  el:"#app",
  data:{
    state:true
  },
  methods:{
    changeA(){
      this.state = !this.state;
    }
  }
})
</script>