vue父页面调用子页面方法

在Vue中，父页面可以通过以下方式调用子页面方法：

使用refs：在子页面中定义一个方法，并在父页面中使用refs：在子页面中定义一个方法，并在父页面中使用refs访问该方法。

在子页面中：

// 子页面
<template>
<div>
<button @click=”childMethod”>调用子方法</button>
</div>
</template>

<script>
export default {
methods: {
childMethod() {
// 子方法逻辑
}
}
}
</script>

在父页面中：

// 父页面
<template>
<div>
<child-component ref=”child”></child-component>
<button @click=”callChildMethod”>调用子方法</button>
</div>
</template>

<script>
import ChildComponent from ‘./ChildComponent.vue’;

export default {
components: {
ChildComponent
},
methods: {
callChildMethod() {
this.$refs.child.childMethod(); // 调用子方法
}
}
}
</script>

使用事件：在子页面中触发一个事件，并在父页面中监听该事件。

在子页面中：

// 子页面
<template>
<div>
<button @click=”triggerEvent”>触发事件</button>
</div>
</template>

<script>
export default {
methods: {
triggerEvent() {
this.$emit(‘child-event’); // 触发子事件
}
}
}
</script>

在父页面中：

// 父页面
<template>
<div>
<child-component @child-event=”handleChildEvent”></child-component>
</div>
</template>

<script>
import ChildComponent from ‘./ChildComponent.vue’;

export default {
components: {
ChildComponent
},
methods: {
handleChildEvent(payload) {
// 处理子事件逻辑，payload为子事件传递的数据
}
}
}
</script>