父级
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
provide(){
return{
say:this.say
}
},
methods:{
say(){
alert("这是父页面的方法");
}
}
}
</script>
<style>
</style>
子级
<template>
<button @click="recv">点击调用父页面的方法</button>
</template>
<script>
export default {
inject:['say'],
methods:{
recv(){
this.say();
}
}
}
</script>
第二中方法
直接在子组件中通过this.$parent.event来调用父组件的方法
父级
<template>
<div>
<child></child>
</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('测试');
}
}
};
</script>
子级
<template>
<div>
<button @click="childMethod()">点击</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
this.$parent.fatherMethod();
}
}
};
</script>
父级调用子级
<left ref="left" @loadmobile="loadmobile" @cancel="cancel"></left>
this.$refs.left.onSave()
子级调用父级
子: this.$emit('subtablecent')
父: <center v-on:subtablecent="subtablecent" ></center>