Vuejs 从 router-view 到外部组件

Question

我正在尝试将数据从 <router-view> 传递到外部组件。我找到了 an example of passing from child to parent，但我不确定 <router-view> 是否被认为是 child。是否可以使用此方法将数据从 <router-view> 内部传递到外部组件？

我有一个 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>

Vuejs 从 router-view 到外部组件

Vuejs from router-view to outside component

vue-component

vuejs2