将数据从子项发送到父项 vue 3
Emit data from Child to parent vue 3
我有一个 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>
在您的搜索栏中,@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>