第一种方法
父组件
// 通过this.$parent.event来调用父组件的方法
<template>
<div>
<child />
</div>
</template>
<script>
import child from './components/child';
export default {
components: {
child
},
methods: {
load() {
console.log('父组件的方法');
}
}
};
</script>
子组件
<template>
<div>
<button @click="clickTarget()">点击</button>
</div>
</template>
<script>
export default {
methods: {
clickTarget() {
this.$parent.load();
}
}
};
</script>
第二种方法
// 父组件把方法注入到子组件,在子组件里调用这个方法
// 父组件
<template>
<div>
<child :load="load" />
</div>
</template>
<script>
import child from './components/child';
export default {
components: {
child
},
methods: {
load() {
console.log('父组件的方法');
}
}
};
</script>
// 子组件
<template>
<div>
<button @click="clickTarget()">点击</button>
</div>
</template>
<script>
export default {
props: {
load: {
type: Function,
default: null
}
},
methods: {
clickTarget() {
if (this.load) {
this.load();
}
}
}
};
</script>