Vue JS 3:如何将数据从一个组件传递到另一个组件?
Posted
技术标签:
【中文标题】Vue JS 3:如何将数据从一个组件传递到另一个组件?【英文标题】:Vue JS 3: How to pass data from one component to another other? 【发布时间】:2021-09-14 10:09:32 【问题描述】:我正在尝试共享存储在Favorites.vue
文件的收藏夹组件中的变量favorite_count
中的数据。我想与App.vue
文件中的应用程序组件共享该数据,但我不能。我希望如果我在收藏夹组件中更改favorite_count
的值,它会在应用程序组件中更改。在网上做了一些研究,但还没有成功。关于我可能做错的任何想法?
Favorites.vue file
<template>
<div class="row m-5">
<h3 class="col-8">Your Favorites</h3>
<div class="col-4">
<p class="pull-right m-1">Picks
<span > favorite_count </span> / 5</p>
</div>
<hr>
</div>
</template>
<script>
export default
name: 'favorites',
data()
return
favorite_count: 5,
,
methods:
changeFavoriteCount()
this.favorite_count = this.favorite_count + 2;
,
emitToParent (event)
this.$emit('childToParent', this.favorite_count)
</script>
App.vue
文件
<template>
<div class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item">
<router-link to="/favorites" class="btn btn-info">
Favorites ( favorite_count )
</router-link>
</li>
</ul>
</div>
</div>
</template>
<script>
import Favorites from './components/Favorites.vue'
export default
name: 'App',
components:
Favorites
,
data ()
return
favorite_count: 0,
</script>
【问题讨论】:
你应该使用 vuex 查看示例 codesandbox.io/s/nervous-tree-w0lq8 它可以避免使用 vars 污染所有内容 【参考方案1】:像这样更改您的 Favourite.vue
文件
<template>
<div class="row m-5">
<h3 class="col-8">Your Favorites</h3>
<div class="col-4">
<p class="pull-right m-1">
Picks <span> favorite_count </span> / 5
<button @click="changeFavoriteCount">Click me to change favorite_count</button>
</p>
</div>
<hr />
</div>
</template>
<script>
export default
name: "favorites",
data()
return
favorite_count: 5,
;
,
methods:
changeFavoriteCount()
this.favorite_count = this.favorite_count + 2;
this.emitToParent();
,
emitToParent()
this.$emit("childToParent", this.favorite_count);
,
,
;
</script>
还有这样的 App.vue 文件
<template>
<div class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item">
<router-link to="/favorites" class="btn btn-info">
<Favorites @childToParent="updateFavorite" />
Favorites ( favorite_count )
</router-link>
</li>
</ul>
</div>
</div>
</template>
<script>
import Favorites from './components/Favorites.vue'
export default
name: 'App',
components:
Favorites
,
data ()
return
favorite_count: 0,
,
methods:
updateFavorite(data)
this.favorite_count = data;
,
,
</script>
【讨论】:
【参考方案2】:如果您以后要在应用程序中使用<router-view>
,我建议您使用this solution
如果您要将Favorites
包含在<template>
中的App.vue
中,您可以使用props:
1. 在父组件 (App.vue) 中声明您的“共享”变量
data ()
return
favorite_count: 0,
,
2.在您的子组件(Favorites.vue)中定义道具
export default
props: favorite_count: Number ,
...
3. 将favorite_count
作为道具传递给Favorites
<template>
...
<Favorites :favorite_count="favorite_count" ... />
</template>
如果您需要更新 favorite_count
- 向父组件发出事件。更多信息请关注Vue docs
编辑: 澄清一下:如果您要从 Favorites.vue 更新 favorite_count
,您需要向 App.vue 发出一个事件 避免改变 props。
这也意味着您需要将 changeFavoriteCount()
函数移动到 App.vue 并将侦听器应用于将调用此函数的子组件:
// App.vue
<template>
...
<Favorites
@your-update-event="changeFavoriteCount"
:favorite_count="favorite_count" ...
/>
</template>
...
changeFavoriteCount(newVal)
this.favorite_count = newVal;
,
【讨论】:
以上是关于Vue JS 3:如何将数据从一个组件传递到另一个组件?的主要内容,如果未能解决你的问题,请参考以下文章