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)
},
}
}