Question

我正在使用laravel和vuejs2，如您所知，我们可以使用动态组件和当前视图加载组件var

现在我使用这个方法加载了一个组件，现在我想加载我加载的这个组件中的另一个组件（这个组件将被删除而另一个组件将替换它）

我该怎么做？

const unirest = require('unirest');

module.exports = {

update: function({name}) {
  unirest.put(someURL)
    .headers({
      'Content-Type': 'application/json'
    })
    .send({
      name: name
    })
    .end(function (response) {
      return new Promise((resolve, reject) => {
        if(response) {
          resolve(response)
        }
        if(error){
          reject(response)
        }
      })
  });
};

和

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 =  ''; }
}
});

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

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

1 个答案: