从父vue组件上的按钮调用子方法

Question

我想从父组件的img标记调用postDetails的toggleDetails方法，但我似乎不知道如何使其工作。

父级：

<div v-for="post in loggedInUser.posts" :key="post._id">
<postDetails :post="post"></postDetails>
<img @click.prevent="toggleDetails" class="grid-item" :src="post.imgUrl" />
</div>
</div>

儿童：

<template>
<section v-if="this.isDetailsOpen"> 
{{this.post.desc}}
</section>
</template>
<script>
export default {
props: {
post: Object,
},
data() {
return {
isDetailsOpen: false
};
},
methods: {
toggleDetails() {
this.isDetailsOpen = !this.isDetailsOpen;
}
}
}
</script>

Answer 1

如果只想将事件从父级发送到子级，可以执行以下操作：

父组件：

<postDetails
ref="post"
:post="post"
></postDetails>
<img 
@click.prevent="toggleDetails()" 
class="grid-item" 
:src="post.imgUrl" 
/>

methods: {
toggleDetails () {
this.$refs.post.toggleDetails()
}
}

子组件：

methods: {
toggleDetails () {
this.isDetailsOpen = !this.isDetailsOpen
}
}

但是，为了能够在任何组件之间发送事件，您必须创建一个eventBus(eventHub(。