vue中有两个属性,provide和inject属性
provide:返回一个对象,跟vue中的data很像,里面有我们要传值给子组件的属性或者对应函数。
inject:子组件接收父组件的值,可以是字符串数组或对象。属性值可以是一个对象,包含from和default默认值。
官网意思:这对属性配合使用,可以这个定义的父组件下的所有子组件中拿到父组件的值,相当于全局的props。
1.首先在父组件中定义provide
<template>
<div id="app">
<div class="home_box" v-if="headUrlPath !== '/login'">
<div class="l_box">
<sliderLeft></sliderLeft>
</div>
<div class="homer_box">
<headNav></headNav>
<div class="homer_rotuer_box">
<router-view v-if="isRouterAlive" />
</div>
</div>
</div>
<div class="login_box" v-else>
<router-view/>
</div>
</div>
</template>
<script>
import sliderLeft from '@/components/sliderLeft'
import headNav from '@/components/headNav'
export default {
name: 'App',
provide() {
return {
reload:this.reload
}
},
data () {
return {
isRouterAlive: true
}
},
created () {
},
mounted () {
},
methods: {
reload () {
this.isRouterAlive = false
this.$nextTick(() => {
this.isRouterAlive = true
})
}
},
computed: {
...mapState({
headUrlPath: 'headUrlPath',
pathArrayList: 'pathArrayList'
})
},
components: {
sliderLeft,
headNav
},
}
}
2.子组件引入
<script>
export default {
inject:["reload"],
data () {
return {
}
},
created () {
},
mounted () {
},
methods: {
toLoadPageAgain () {
this.reload()
},
...mapMutations([
'resetNavPathData',
'setSlierMenusList'
])
},
}
</script>
3.到这里我们的router-view就可以实现局部刷新,不用整个页面都刷新。配合项目有很多用法,等你来解锁。