淘先锋技术网

首页 1 2 3 4 5 6 7

如果需要在Vue应用程序中使用多个Vue实例,并在它们之间进行切换,可以使用Vue的动态组件。

vue怎样多个vue直接切换

首先,在模板中定义多个组件:


  <div id="app">
    <component v-bind:is="currentComponent"></component>
    <button v-on:click="switchComponent">切换组件</button>
  </div>

  <template id="component-a">
    <div>
      <h1>这是组件A</h1>
      <p>这是组件A的内容。</p>
    </div>
  </template>

  <template id="component-b">
    <div>
      <h1>这是组件B</h1>
      <p>这是组件B的内容。</p>
    </div>
  </template>

然后,在Vue实例中定义currentComponent变量和switchComponent方法:


  var vm = new Vue({
    el: '#app',
    data: {
      currentComponent: 'component-a'
    },
    methods: {
      switchComponent: function () {
        this.currentComponent = (this.currentComponent === 'component-a') ? 'component-b' : 'component-a';
      }
    }
  });

这样,当按钮被点击时,Vue会自动去加载名为currentComponent的组件。在switchComponent方法中,我们通过检查currentComponent的当前值来轮流切换组件A和组件B。