如何從另一個組件

Question

我使用laravel和vuejs2並加載vuejs活力的組成部分，你知道，我們可以使用動態組件和當前視圖VAR

，現在我用這個方法加載一個組成部分，現在我加載組件想從我加載的這個組件加載另一個組件（這個組件將被刪除，另一個組件將被替換）

我該怎麼做？

import example from './components/Example.vue'; 
import example2 from './components/Example2.vue'; 
import login from './components/Login.vue'; 

Vue.component('example', example); 
Vue.component('example2', example2); 
Vue.component('login', login); 



const app = new Vue({ 
el: '#content', 
data: { 
    currentView: '', 
    show: true 
}, 
methods:{ 
    example1: function(){ this.currentView = 'login'; }, 
    example2: function(){ this.currentView = 'example2'; }, 
    noview: function(){ this.currentView = ''; } 
} 
}); 

和

<component :is='currentView'> </component> 

Answer 1

發射從所述部件指示加載組件中的事件，並收聽在Vue的該事件。

想象一下，下列組件是您要導入到主文件的組件。點擊按鈕時請注意$emit。

const Example1 = { 
    template:` 
    <div> 
     <h1>Example One</h1> 
     <button @click="$emit('change-component', 'example 2')">Load Example Two</button> 
    </div> 
    ` 
} 

const Example2 = { 
    template:` 
    <div> 
     <h1>Example Two</h1> 
     <button @click="$emit('change-component', 'example 1')">Load Example One</button> 
    </div> 
    ` 
} 

然後在您的Vue模板中，聽取change-component事件。

<component :is='currentView' 
     @change-component="onChangeComponent"> 
</component> 

並在您的Vue中處理事件並更改currentView。

new Vue({ 
    el:"#content", 
    data: { 
     currentView: Example1, 
     show: true 
    }, 
    methods:{ 
    onChangeComponent(comp){ 
     if (comp === "example 1") 
     this.currentView = Example1 
     if (comp === "example 2") 
     this.currentView = Example2 
    } 
    } 
}) 

Example。