1.在子组件中用this.$parent.fn()来调用父组件的方法
父组件中
<script>
export default {
methods: {
parentFn() {
console.log('父组件的方法');
}
}
};
</script>
子组件中
<template>
<div>
<div @click="handleClick()">点击</div>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
this.$parent.parentFn()
//点击按钮执行父组件中的parentFn方法
}
}
};
</script>
2.在子组件中用this.$emit(‘自定义事件’)向父组件抛发一个自定义事件,父组件监听这个事件
父组件中
<template>
<div>
<Child @childEvent="parentFn()"></Child >
</div>
</template>
<script>
export default {
methods: {
parentFn() {
console.log('父组件的方法');
}
}
};
</script>
子组件中
<template>
<div>
<div @click="handeClick()">点击</div>
</div>
</template>
<script>
export default {
methods: {
handeClick() {
this.$emit('childEvent')
//点击按钮执行父组件中的parentFn方法
}
}
};
</script>
3.将父组件的方法传入子组件中,在子组件里直接调用这个方法
父组件中
<template>
<div>
<Child :parentFn="parentFn"></Child >
</div>
</template>
<script>
import Child from '@/components/Child ';
export default {
components: {
Child
},
methods: {
parentFn() {
console.log('父组件的方法');
}
}
};
</script>
子组件中
<template>
<div>
<div @click="handeClick()">点击</div>
</div>
</template>
<script>
export default {
props: {
parentFn: {
type: Function,
default: null
}
},
methods: {
handeClick() {
this.parentFn()
//点击按钮执行父组件中的parentFn方法
}
}
};
</script>