Вызов дочернего метода из кнопки родительского компонента vue - PullRequest
1 голос
/ 29 апреля 2020

Я хочу вызвать метод toggleDetails для postDetails из тега img родительского компонента, и я не понимаю, как заставить его работать.

Parent:

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

1 Ответ

0 голосов
/ 29 апреля 2020

Если вы хотите передать событие только от родителя к потомку, вы можете сделать что-то вроде этого:

Родительский компонент:

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...