Vue.js中使用动态组件的方法

本文介绍了如何在Vue.js中引用组件中的HTML元素。您可以通过使用Vue路由器或创建动态组件来切换视图或组件模板。

Vue路由器用于在DOM中的视图或组件模板之间导航。要使用Vue路由器，请在route组件中定义路由，并向Vue表明应该在事件(如单击)上挂载新组件。

这是处理用户界面内的边栏和菜单组件中的导航的正确方法。

如果您希望在DOM中挂载的两个任意组件之间进行切换而不需要创建路由，那么您可能需要使用动态组件。

动态组件

Vue动态组件允许用户在两个或多个组件之间进行切换而无需路由，甚至在切换回初始组件时保留数据状态。

其核心思想是让用户在不使用路由器的情况下动态地挂载和卸载用户界面中的组件。

为什么动态组件很重要?

在设计用户界面时，您需要某种形式的灵活性来显示或隐藏基于应用程序状态的嵌套组件。动态组件以高效、简单的方式提供了这个平台。

该特性为您节省了大量代码，因为您可以使用v-if和v-else等Vue条件结构轻松实现动态组件。您可以使用条件结构来实现动态组件，方法是使用占位符来轻松地将逻辑绑定到组件。

这种方法可以确保您的演示始终是干净和明确的。

才能在Vue中创建动态组件。在你的电脑中，你将需要以下资料:

已安装Node.js版本10.x及更高版本。您可以通过在终端/命令提示符下运行以下命令来验证您是否拥有Node.js 10.x版：

node -v

一个代码编辑器(推荐使用Visual Studio)。

Vue的最新版本，已全局安装在您的计算机上。

您的计算机上已安装Vue CLI 3.0。为此，请先卸载旧的CLI版本：

npm uninstall -g vue-cli

然后，安装一个新的:

npm install -g @vue/cli

动态组件的语法

Vue为动态组件提供了一个特殊的模板元素，简称为component。语法是这样的:

<component v-bind:is=”currentComponent”></component>

组件元素也可以是一个自关闭标签:

<component v-bind:is=”currentComponent”/>

第一个选项最适合浏览兼容性。

演示

下载starter项目并在VS代码中打开它，以获得一些动态组件的示例。starter项目允许您访问一个现有的测试组件，创建第二个测试组件，并在两者之间进行切换。

导航到components文件夹并创建一个新文件。将文件命名为Test2.vue并将以下代码块复制到文件中：

<template>
  <div><h1>I am Test 2</h1>
  </div>
</template>
<script>
export default {
  name: 'Test2',
  props: {
    msg: String
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

现在您有了第二个组件，转到App.vue文件并注册该组件:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test />
    <Test2 />
  </div>
</template>
<script>
import Test from './components/Test.vue'
import Test2 from './components/Test2.vue'
export default {
  name: 'app',
  components: {
    Test, Test2
  }
}
</script>

两个测试组件现在嵌套在根应用程序组件中。如果只想挂载一个组件，然后动态切换到另一个组件，则必须创建一个动态组件。

将下面的代码块复制到app.vue文件的模板部分:

<template>
   <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <component is="Test" />
   </div>
</template>

接下来，使用以下serve命令运行应用程序:

npm run serve

您将看到只显示Test 1组件。

如果仅在模板中指定了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>

保存所有项目文件后，再次运行应用程序。在输入框中键入，切换组件，并切换回原始组件。您将注意到在切换组件之前输入的值与之前输入的值完全相同。

结论

本文介绍了如何在Vue.js工作流中使用动态组件。您现在还可以通过keep-alive扩展组件元素的能力。