父子组件中，子组件调用父组件的方法

父子组件中，子组件调用父组件的方法

方法一：直接在子组件中通过this.$parent.event来调用父组件的方法

父组件

<template><p><child>父组件</child></p>
</template>
<script>import child from '~/components/dam/child';export default {components: {child},methods: {fatherMethod() {}}};
</script>

子组件

<template><p><button @click="childMethod()">子组件</button></p>
</template>
<script>export default {methods: {childMethod() {this.$parent.fatherMethod();}}};
</script>

方法二：在子组件里用$emit向父组件触发一个事件，父组件监听这个事件即可

父组件

<template><p><child @fatherMethod="fatherMethod">父组件</child></p>
</template>
<script>import child from '~/components/dam/child';export default {components: {child},methods: {fatherMethod() {}}};
</script>

子组件

<template><p><button @click="childMethod()">子组件</button></p>
</template>
<script>export default {methods: {childMethod() {this.$parent.fatherMethod();}}};
</script>

方法三：父组件把方法传入子组件中，在子组件里直接调用这个方法

父组件

<template><p><child @fatherMethod="fatherMethod">父组件</child></p>
</template>
<script>import child from '~/components/dam/child';export default {components: {child},methods: {fatherMethod() {}}};
</script>

子组件

<template><p><button @click="childMethod()">子组件</button></p>
</template>
<script>export default {props: {fatherMethod: {type: Function,default: null}},methods: {childMethod() {if (this.fatherMethod) {this.fatherMethod();}}}};
</script>