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

Posted 2023-02-16

【中文标题】如何从另一个组件加载 vuejs 动态组件

【英文标题】：how to load vuejs dynamic component from another component

【发布时间】：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>

【参考方案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.