从父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）。