Vue3，在哪里監聽發射事件

我正在使用 $emit 將事件從子組件發送到父組件。我知道我應該告訴父組件聽那個事件，但是我不知道把

@openModal="changeModalVisibility"

我應該將其作為主 div 中的屬性嗎？由于這是最高的組件，我找不到合適的位置。

孩子：

<template>
  <div class="cocktail-result" v-on:click="openModal">
    <img :src="cocktailImg" alt="cocktail-image" />
    <p>{{ cocktailName }}</p>
    <div class="explore-button">
      <img
        src="../assets/img/arrow-forward-icon.svg"
        alt="arrow icon"
        class="arrow-icon"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "CocktailResult",
  props: {
    cocktailName: {
      type: String,
    },
    cocktailImg: {
      type: String,
    },
    modalClass: {
      type: String,
    },
  },
  methods: {
    openModal() {
      this.$emit("openModal");
    },
  },
};
</script>

家長：

<template>
  <div class="main-container" v-on:openModal="changeModalVisibility">
    <div class="search-bar-container">
      <img src="./assets/img/logo.png" alt="logo" class="logo" />
      <div class="search-bar">
        <input
          type="text"
          v-model="searchQuery"
          class="search-bar-input"
          placeholder="Enter Your Favorite Cocktail:"
          @input="callCocktailApi"
        />
        <img
          src="./assets/img/close-icon.svg"
          alt="close icon"
          class="close-icon"
          v-on:click="clearInput"
        />
      </div>
    </div>
    <div class="result-container">
      <ul v-for="(cocktail, index) in cocktailArray" :key="cocktail.key">
        <CocktailResult
          :cocktailName="this.cocktailArray[index].strDrink"
          :cocktailImg="this.cocktailArray[index].strDrinkThumb"
          :cocktailGlass="this.cocktailArray[index].strGlass"
          :cocktailInstructions="this.cocktailArray[index].strInstructions"
          :modalClass="this.modalClass"
          :method="changeModalVisibility"
        />
      </ul>
    </div>
    <CocktailModal :modalClass="this.modalClass" />
  </div>
</template>

<script>
import CocktailResult from "./components/CocktailResult.vue";
import CocktailModal from "./components/CocktailModal.vue";
import axios from "axios";

export default {
  name: "App",
  data() {
    return {
      cocktailArray: "",
      searchQuery: "",
      cocktailName: "",
      cocktailImg: "",
      modalClass: "hidden",
    };
  },
  components: {
    CocktailResult,
    CocktailModal,
  },
  methods: {
    callCocktailApi() {
      axios
        .get(
          `https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${this.searchQuery}
    ` // API Call
        )
        .then((res) => {
          this.cocktailArray = JSON.parse(
            JSON.stringify(res.data.drinks || [])
          );

          this.cocktailName = this.cocktailArray[0].strDrink;

          // Only render results if an array is fetched

          console.log(this.cocktailArray);
        })
        .catch((error) => {
          console.log(error);
        });
    },

    clearInput() {
      this.cocktailArray = "";
      this.searchQuery = "";
    },

    changeModalVisibility() {
      this.modalClass = "";
      console.log("I'm working");
    },
  },
};
</script>

uj5u.com熱心網友回復：

您應該放入@openModal您的父組件，在那里您呼叫CocktailResult.

<CocktailResult 
 @openModal=“YourCallback”
 … 
/>

標籤：javascript Vue.js

上一篇：“vite”和“vite預覽”有什么區別？

下一篇：Nuxtauth用戶始終為空