Vueの2成分は再レンダリングすること

Question

内の動的コンポーネントを切り替えた後、私は2つの他のコンポーネントのインポートメインコンポーネントがあります：主成分で

1. 管理ページ
2. ログインページ

をI持っている：

<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ファイルによって呼び出されます。問題は、私は、ログインページにchangeView関数を呼び出すときも、トリガが送信されることである

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 
    } 
}) 

とビューでメイン・コンポーネントは必要に応じてadminPageに変更されますが、メイン・ページが再レンダリングされ、ビューがログイン・ページに戻ります。

質問：「currentView」状態を変更した後にメインコンポーネントが再レンダリングされる理由と、管理ページをビューとして保持する方法を教えてください。

Answer 1

• テンプレート内の何かに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>