如何从其他组件加载vuejs动态组件

Question

我使用的是laravel和vuejs2，如您所知，我们可以使用动态组件和当前视图变量加载组件

现在我用这个方法加载了一个组件，现在我想从这个我加载的组件中加载另一个组件(这个组件将被移除，另一个组件将被替换)

我该怎么做呢？

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。