vue子页面调用父页面方法
方法描述
父页面 (provide)
provide() {
return {
onReconfigurationStatus: this.方法名,
provideOnCancel: this.方法名
}
},
子页面 (inject)
inject: ['provideOnCancel', 'onReconfigurationStatus'],
//方法中使用
this.provideOnCancel()
实际应用场景
父页面 (provide)
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
provide(){
return{
say:this.say
}
},
methods:{
say(){
alert("这是父页面的方法");
}
}
}
</script>
<style>
</style>
子页面 (inject)
<template>
<button @click="recv">点击调用父页面的方法</button>
</template>
<script>
export default {
inject:['say'],
methods:{
recv(){
this.say();
}
}
}
</script>
运行结果
整理自网络
https://blog.csdn.net/u012749229/article/details/118705901
https://www.cnblogs.com/GeekXwj/p/9328422.html