兄弟组件之间通信

inject 兄弟组件之间通信

场景：building组件去改变nav组件的count值
路由

{
        path:'project/Home',
        name:'project_home',
        component:()=>import('../views/project/Home.vue'), //项目级地址
        children:[
          {
            path:'/project/Home/building',
            name:'project_building',
            component:()=>import('../views/project/building.vue')
          }
        ]
}

Home父组件提供

<template>
  <div class="father">
      <navTo ref="navTo"></navTo>
      <router-view />
  </div>
</template>

<script>
import navTo from "./header/navTo.vue";
export default {
  components: {
    navTo,
  },
  provide() {
    return {
      reload: this.reload,
    };
  },
  methods: {
    reload(val) {
      this.$refs.navTo.changeCuount(val)
    },
  },
}
</script>

子组件注入

nav子组件

<template>
    <div class="nav">
        <div class="dept_style">
            <div v-for="(item,index) in project" :key="index" 
             :class="{alter_dept_style:count===index}" @click="goTo(item,index)">
                {{item.name}}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            project:[{name:'数字工地',path:'project_building'},{name:'视频监控',path:'video_play'},{name:'鹰眼AI',path:'project_eye'},{name:'工地配置',path:'project_deploy'}],  //项目集导航栏
            count:0,
        }
    },
    methods:{
        changeCuount(val){
            this.count = val
        },
    }
</script>

building子组件

<template>
  <div class="building">
  	<p style="cursor: pointer;" @click="change">改变nav的count</p>
  </div>
</template>
<script>
export default {
	inject: ["reload"],
	methods: {
		change() {
      		this.reload(1)
    	},
	}
}