1

我有一个导入其他两个组件的主要组件：

  1. 管理页面
  2. 登录页面

在我的主要组件中：

<template>
  <div id="app">
    <component v-bind:is="currentView"></component>
  </div>
</template>

<script>
import AdminPage from './components/adminPage/AdminPage'
import LoginPage from './components/LoginPage'

export default {
  name: 'app',
  components: {
    AdminPage, LoginPage
  },
  data: function() {
    return {
      currentView: 'LoginPage'
    }
  },
  created() {
       this.$bus.$on('eventFromLoginPage', event => {
            this.currentView = "AdminPage";
        });
  }
}
</script>

在登录页面中，我有一个向主应用程序发出触发器的方法：

changeView: function() {
       this.$bus.$emit('eventFromLoginPage');
 }

主要组件由 main.js 文件调用：

import Vue from 'vue'
import App from './App'

Object.defineProperty(Vue.prototype, '$bus', {
    get() {
        return this.$root.bus;
    }
});

var bus = new Vue({})

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  data: {
    bus: bus
  }
})

问题是，虽然当我在登录页面调用changeView函数时，发送了触发器并且主组件中的视图根据需要更改为adminPage，但是主页面被重新渲染并且视图返回到登录页面.

问题：为什么在更改“currentView”状态后主组件会重新渲染，如何将管理页面保留为视图。

4

1 回答 1

2
  • 在模板中调用Vue某些东西很奇怪。在顶级 HTML 元素上调用它。
  • 仅当事件由发出事件的组件的父链之外的东西处理时才使用总线
  • v-on使用和方法处理事件

AdminPage = {
  template: '<div>The admin page</div>'
};

LoginPage = {
  template: '<div>The LOGIN page<button @click="doLogin">Login</button></div>',
  methods: {
    doLogin: function() {
      this.$emit('eventFromLoginPage');
    }
  }
};

App = {
  template: '<component v-bind:is="currentView" v-on:eventFromLoginPage="goToAdminPage"></component>',
  components: {
    AdminPage, LoginPage
  },
  data: function() {
    return {
      currentView: 'LoginPage'
    }
  },
  methods: {
    goToAdminPage: function() {
      this.currentView = 'AdminPage';
    }
  }
};

new Vue({
  el: '#app',
  components: {
    App
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="app">
  <App></App>
</div>

于 2017-01-30T17:12:43.537 回答