provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。
这种方式可以避免在使用props传值时,必须将每一个属性都传递给子组件的写法,当使用的公共组件不确定会被传递什么值的时候,使用这种写法非常方便。
在父组件中APP.Vue中
<template>
<div id="app" style="height:100%;">
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'App',
provide(){
return{
reload:this.reload
}
},
data(){
return{
isRouterAlive:true
}
},
methods:{
reload(){
this.isRouterAlive = false;
this.$nextTick(function(){
this.isRouterAlive = true;
})
}
}
}
</script>
在子组件中注入父组件中的变量在data()之前注入
inject:['reload'],
在哪里引用就调用
this.reload()