兄弟组件之间的数据操作
。。将子组件的数据放在父组件维护
。。操作声明在父组件，传到另一个子组件就可实现兄弟组件间的数据操作

方法1------------------------------------------------

这是父组件，通过父组件定义一个数组list，传给组件1进行v-for渲染出来，定义一个方法用于删除元素，传给组件2

<template>
  <div id="app">
    父组件
    <hr>
      <Course :lists="list" />
      <hr>
      <Home :dlt="deleteClick" />
  </div>
</template>

<script>
import Course from './components/Course.vue'
import Home from './components/Home.vue'
export default {
  name: 'App',
  data(){
    return{
      text:'',
      list:['苹果','香蕉','橘子']
    }
  },
  components: {
    Course,
    Home
  },
 methods:{
   deleteClick(){
      this.list.pop()
    }
 }
  
}
</script>

<style>
</style>

这是子组件1，使用porps进行接收父组件的数据，并渲染出来

<template>
    <div>
        子组件
        <div v-for="(item,index) in lists" :key="index">{{item}}</div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            
        }
    },
    props:['lists'],
    methods:{
        
    },

}
</script>

这是子组件2，使用props接收方法，并绑定给按钮触发

<template>
    <div>
        子组件2
        <button @click="delt">shan</button>
    </div>
</template>
<script>
export default {
    data(){
        return{}
    },
    props:["dlt"],
    methods:{
        delt(){
          this.dlt();
        }
    }
}
</script>

这样就可以通过组件2去删除组件1的数据了，这也就完成了最基本的兄弟组件通信

方法2------------------------------------------------

如果我想任意组件之间的通信，那就需要下面的方法
1，安装事件总线，在main.js文件添加一个生命周期函数，在里面定义个bas指向vue实例

new Vue({
    el: "#app",
    beforeCreate(){
      Vue.prototype.$bas = this;
    },
    
    render: h => h(App),
})

2，在组件1使用$on监听自定义事件suiji,通过组件2触发返回组件2的参数，在组件1进行渲染

<template>
    <div>
        子组件
        {{text1}}
    </div>
</template>
<script>
export default {
    data(){
        return{
            text1:""
        }
    },
    methods:{
        
    },
    mounted(){
        this.$bas.$on("suiji",(i)=>{
            this.text1= i
        })
    }

}
</script>

3，在组件2触发自定义事件，将text传给组件1

<template>
    <div>
        子组件2
    </div>
</template>
<script>
export default {
    data(){
        return{
            text:"123"
        }
    },
    methods:{

    },
    mounted() {
        this.$bas.$emit("suiji",this.text)
    },
}
</script>

最后组件2的数据成功在组件1渲染，这里只是举例两个子组件，因为这种方法可以适用于任何组件之间的传值