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

Child:

<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
  }
}

但是要想在任何组件之间发送事件，你必须创建一个事件总线（eventHub）。