如何从另一个组件加载 vuejs 动态组件答案

【问题标题】：how to load vuejs dynamic component from another component如何从另一个组件加载 vuejs 动态组件
【发布时间】：2017-09-21 20:34:20
【问题描述】：

我正在使用 laravel 和 vuejs2，如您所知，我们可以使用动态组件和当前视图 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>

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案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.

【讨论】：