H5W3
当前位置:H5W3 > 其他技术问题 > 正文

router-view跳转成功后,怎样自动触发事件改变父组件上的内容?

父组件如下,一个<header>和一个<router-view>,我想做的是当router-view切换成功后自动触发changeTitle()改变<header>中的title值。

<template>
  <div id="app">
    <header>
      <i class="icon-back" v-on:click="backwards"></i>
      {{title}}
    </header>
    <transition :name="transitionName">
      <router-view class="view" v-on:viewIn="changeTitle"></router-view>
    </transition>
  </div>
</template>

子组件中定义了一个方法

methods: {
  viewIn: function(){
    this.$emit('viewIn',"首页")
  }
}

如何在自动触发viewIn这个方法,而不是通过人为的click去触发?

解决了

created (){
      this.$emit('viewIn',"投注站");
    },
    

路由实例创建完成后自动执行。

回答:

view-router有提供路由切换的钩子函数,你可以在这个里面添加逻辑来发送事件通知需要组件
(详见http://router.vuejs.org/zh-cn…

回答:

试一下路由的组件里使用$dispatch()传递一个参数来告诉父组件,里面的路由组件切换完成,父组件再用events接收一下$dispatch()的响应事件,然后再执行你那个函数就可以了

回答:

用vuex,直接绑定vuex store的值,在router的afterEach钩子进行store的值修改。

回答:

解决了

created (){
      this.$emit('viewIn',"投注站");
    },
    

路由实例创建完成后自动执行。

本文地址:H5W3 » router-view跳转成功后,怎样自动触发事件改变父组件上的内容?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址