时间戳

首页 > 解决方案 > 从父 vue 组件上的按钮调用子方法

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

问题描述

我想从父组件的 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>

标签： vue.jsvuexparent-child

解决方案

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

父组件：

<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)。

推荐阅读