Vue.js中使用动态组件的方法(2)-木庄网络博客

如果仅在模板中指定了Test 1元素，这正是您将获得的响应。为了使组件具有动态性，我们可以使用v-bind指令将其绑定到set属性。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <component v-bind:is="component" />
  </div>
</template>
<script>
import Test from './components/Test.vue'
import Test2 from './components/Test2.vue'
export default {
  name: 'app',
  components: {
    Test, Test2
  },
  data (){
    return {
      component:"Test"
    }
  }
}
</script>

您的组件现在与数据中的组件属性绑定。如果您将组件切换到Test2，它将自动挂载Test2组件。

在浏览器上测试一下。

添加方法调用

您可以添加方法调用来控制组件动态显示的逻辑。组件元素允许您访问Vue实例中的每个构造。

下面是一个切换这两个组件的小方法的例子:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <component v-bind:is="component" />
    <button v-on:click="toggle">Toggle</button>
  </div>
</template>
<script>
import Test from './components/Test.vue'
import Test2 from './components/Test2.vue'
export default {
  name: 'app',
  components: {
    Test,
     Test2
  },
  data (){
    return {
      component:"Test2"
    }
  },
  methods: {
    toggle(){
      if (this.component === Test) {
        this.component = Test2;
      } else {
        this.component = Test;
      }
    }
  }
}
</script>

切换时保持数据值有效

在Vue团队构建这个特性时，他们选择扩展它的功能，包括存储每个状态的数据值。

为了存储这些数据，Vue提供了一个名为keep-alive的模板元素。使用keep-alive，您可以确保在从一个组件切换回另一个组件后，您的组件状态保持原样。

例如，如果您单击某个链接或在文本框中输入一个值，然后切换组件，那么keep-alive会将您带回到切换回来时使用的相同链接或文本框。

要启用keep-alive，请转到app.vue文件的模板部分，并使用keep-alive元素包装组件元素:

<keep-alive>
  <component v-bind:is="component" />
</keep-alive>

要查看它是否工作，请将表单元素添加到测试中。vue文件，在模板部分添加如下代码块:

<template>
  <div><h1>I am Test 1</h1>
       <form>
         First name:<br>
         <input type="text" name="firstname"><br>
         Last name:<br>
         <input type="text" name="lastname">
       </form>
  </div>
</template>