1, the two must also be used when the method defined in the parent component, sub-assembly also want to use how to do, this time it can come in handy
provide：Object | () => Object
inject：Array<string> | { [key: string]: string | Symbol | Object }
Parent components
<template>
<div
id="app"
>
<router-view
v-if="isRouterAlive"
/>
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
data () {
return {
isShow: false,
isRouterAlive: true
},
// Returns the parent component to pass data subordinates
provide () {
return {
reload: this.reload
}
},
methods: {
reload () {
this.isRouterAlive = false
this.$nextTick(() => {
this.isRouterAlive = true
})
}
}
}
</script>
Sub-assemblies
<template>
<popup-assign
:id="id"
@success="successHandle"
>
<div class="confirm-d-tit"><span class="gray-small-btn">{{ name }}</span></div>
<Strong> to be assigned to </ strong>
<a
slot="reference"
class="unite-btn"
>
Designate
</a>
</popup-assign>
</template>
<script>
import PopupAssign from '../PopupAssign'
export default {
// reference vue reload method
inject: ['reload'],
components: {
PopupAssign
},
methods: {
// ...mapActions(['freshList']),
async successHandle () {
this.reload()
}
}
}
</script>
This realization of the sub-assembly method to achieve the transfer of reload the refresh function vue components, personally think that it implements the components to transfer data across the assembly method.