【发布时间】：2020-12-16 14:26:19
【问题描述】：
我是 Vue.js 的初学者，我有一个与不在同一页面上的 Vue.js 组件之间的通信相关的问题。
我的 Vue.js 应用中有多个页面，我使用路由器在它们之间导航。所以我有“主页”页面和“搜索”页面用于过滤实体。
在“主页”页面上，我也有不太详细的搜索组件，我想将其用作“搜索”页面的快捷方式，因此当用户填写输入字段并单击按钮时，他的搜索参数将传递给搜索“搜索”页面和“搜索”页面上的组件，然后执行搜索。基本上，我只想将数据从“主页”页面上的快捷搜索组件发送到“搜索”页面上的搜索组件。
我尝试使用 事件总线，当单击“主页”页面上的按钮时，我会从“主页”页面搜索中发出参数：
methods:{
searchApartments: function(){
this.searchParameters.push(this.locationSearch);
this.searchParameters.push(this.$refs.guestNumberInput.value);
this.$root.$emit("searchApartmentsFromHomepage", this.searchParameters);
this.$root.$emit("showAppartmentPage");
}
在“搜索”页面搜索组件上，我使用 “mounted”生命周期 hook() 来监听该事件总线。然后我会在“搜索”页面组件上设置字段（通过“v-model”绑定到“数据”中的字段）设置为我从“主页”页面获得的值强>。然后，我将使用这些值调用搜索函数：
mounted(){
this.$root.$on("searchApartmentsFromHomepage", (searchParameters) => {
this.locationSearch = searchParameters[0];
this.numberOfGuests = searchParameters[1];
this.filterApartments();
});
},
我一切正常，但“搜索”页面上的输入字段未设置为我从“主页”页面收到的值。不幸的是，即使成功传递了值，它们也不会出现在我的搜索组件的字段中，并且过滤器功能也没有从中获取任何数据...
有人知道我做错了什么吗？
【问题讨论】：
-
当
Home发出searchApartment事件时，听起来Search组件实例尚未创建。你说input fields on "Search" page are not set to values that I have received from "Home" page.，你怎么知道the values already received from "Home" page？ -
@Sphinx 我也是这么想的。但是我对 Vue.js 的了解有限，所以我找不到任何不同的方法，除了将“搜索”移动到后端并在那里发送请求......你有什么建议或可能的解决方案吗？
标签： vue.js vuejs2 components