1、这个两个必须同时使用，当父组件定义的方法，子组件也想使用怎么办了，这时候就可以派上用场了
provide：Object | () => Object
inject：Array<string> | { [key: string]: string | Symbol | Object }
父组件中
<template>
<div
id="app"
>
<router-view
v-if="isRouterAlive"
/>
</div>
</template>
<script>
export default {
name: ‘App‘,
components: {
},
data () {
return {
isShow: false,
isRouterAlive: true
},
// 父组件中返回要传给下级的数据
provide () {
return {
reload: this.reload
}
},
methods: {
reload () {
this.isRouterAlive = false
this.$nextTick(() => {
this.isRouterAlive = true
})
}
}
}
</script>
子组件中
<template>
<popup-assign
:id="id"
@success="successHandle"
>
<div class="confirm-d-tit"><span class="gray-small-btn">{{ name }}</span></div>
<strong>将被分配给</strong>
<a
slot="reference"
class="unite-btn"
>
指派
</a>
</popup-assign>
</template>
<script>
import PopupAssign from ‘../PopupAssign‘
export default {
//引用vue reload方法
inject: [‘reload‘],
components: {
PopupAssign
},
methods: {
// ...mapActions([‘freshList‘]),
async successHandle () {
this.reload()
}
}
}
</script>
这样就实现了子组件调取reload方法就实现了刷新vue组件的功能,个人认为它实现了组件跨越组件传递数据方法。
原文：https://www.cnblogs.com/hongyungo/p/12363118.html