从路由器视图到外部组件

Question

我正在尝试将数据从路由器视图传递到外部组件。我找到了an example of child to parent，但我不确定路由器视图是否被认为是孩子 是否可以使用此方法将数据从withing传递到外部组件？

我有一个ChildView，我发出一个事件来将值传递给TopNavSection。

这是我的结构：

我在ChildView中发送了这个事件：

 mounted() {
  this.$emit('update-back-link', "value");
},

但是我的事件没有通过MainContainer.vue中的代码处理。

<top-nav-section @update-back-link="handleBackLinkUpdate"></top-nav-section>

methods: {
  handleBackLinkUpdate: function (value) {
    debugger;
    console.log(value);        
  },
},

请让我知道我是否在正确的轨道上，因为我不知道为什么处理程序没有被触发。感谢

Answer 1

ChildView组件正在发出update-back-link事件，而不是TopNavSection组件。但是，您在<top-nav-section>标记上有事件处理程序。 TopNavSection永远不会发出update-back-link事件，因此它的处理程序永远不会被触发。

您应该将事件处理程序移动到ChildView组件的标记（因为您使用的是ChildView，因为路由组件将是<router-view>）：

<router-view @update-back-link="handleBackLinkUpdate"></router-view>