如果你要使用<router-view>
稍后在您的申请中,我建议这个解决方案 https://stackoverflow.com/a/68217600/16315484
如果你要包括Favorites
inside <template>
in App.vue
, 您可以使用props https://v3.vuejs.org/guide/component-props.html#prop-types:
1.在父组件 (App.vue) 中声明您的“共享”变量
data () {
return {
favorite_count: 0,
}
},
2.在子组件中定义 props (Favorites.vue)
export default {
props: { favorite_count: Number },
...
}
3. Pass favorite_count
作为支撑Favorites
<template>
...
<Favorites :favorite_count="favorite_count" ... />
</template>
如果您需要更新favorite_count
- 向父组件发出事件。更多相关信息请参见Vue docs https://v3.vuejs.org/guide/component-custom-events.html#custom-events
Edit:只是澄清一下:如果您要更新favorite_count
from 收藏夹.vue,您需要发出一个事件App.vue以避免改变道具。
这也意味着你需要移动你的changeFavoriteCount()
功能为App.vue并将侦听器应用于将调用此函数的子组件:
// App.vue
<template>
...
<Favorites
@your-update-event="changeFavoriteCount"
:favorite_count="favorite_count" ...
/>
</template>
...
changeFavoriteCount(newVal) {
this.favorite_count = newVal;
},