将数据从子项发送到父项 vue 3

Question

我有一个 SearchBar.vue 子页面，此代码中有一个表单：

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code>      <template>
      <div>
        <form class="search-bar" @submit.prevent="SearchMovies()">
          <input
            type="text"
            placeholder="Effectuez une recherche"
            v-model="search"
          />
          <button
            type="submit"
            class="search-input"
            @click="$emit('get-movies', movies)"
          >
            CHERCHER
          </button>
        </form>
      </div>
    </template>

Answer 1

在您的搜索栏中，@click 事件从未实际调用 SearchMovies 方法。尝试转换

<button type="submit" class="search-input" @click="searchMovies">...</button>

您没有在设置底部导出设置中的函数

setup (_, {emit}) {
    const search = ref("")
    const movies = ref([])
    const SearchMovies = () => {
        const value = await fetch(`${process.env.VUE_APP_API_URL_CALL_TWO}${search.value}`)
        const data = await value.json()
        movies.value = data.contents
        search.value = ""
        console.log("Movies data from SearchBar.vue when fired up: ", movies.value);
        emit('get-movies', movies.value)
    }
    return { search, movies, SearchMovies }
}

在您的 fetch 语句中，您将遇到一些异步代码问题，fetch 语句将运行，但随后它将跳过 await 回调以支持执行此操作。$emit。我会把它转换成然后，最后，我不会用

捕获 Home.vue 中的值

<SearchBar @get-movies="getMovies($event)" />

相反，只需使用 @get-movies="getMovies" 您实际上不需要让它调用一个函数，它会自己调用函数，我发现尝试使用事件总线有时会引起混淆。只有在模板中有特定数据可以传递给它时才需要使用它，就像在 v-for 循环中可以传递特定对象一样。如果您需要我澄清任何内容，请告诉我，以便您更好地理解为什么它是这样构建的。

<template>
      <div class="search-bar">
          <input
            type="text"
            placeholder="Effectuez une recherche"
            v-model="search"
          />
          <button
            class="search-input"
            @click="SearchMovies"
          >
            CHERCHER
          </button>
        </div>
    </template>

将数据从子项发送到父项 vue 3

Emit data from Child to parent vue 3

vue.js

onclick

submit

emit