vue.js - 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...）

这篇关于vue.js - router-view跳转成功后，怎样自动触发事件改变父组件上的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！