vuejs2 - Vuejs 从路由器 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>