Vue.js에서 동적 구성요소를 사용하는 방법

이 문서에서는 Vue.js의 구성 요소에서 HTML 요소를 참조하는 방법을 설명합니다. Vue Router를 사용하거나 동적 구성 요소를 생성하여 보기 또는 구성 요소 템플릿을 전환할 수 있습니다.

Vue Router는 DOM의 뷰 또는 구성 요소 템플릿 간을 탐색하는 데 사용됩니다. Vue Router를 사용하려면 경로 구성 요소에 경로를 정의하고 새 구성 요소가 이벤트(예: 클릭)에 마운트되어야 함을 Vue에 표시합니다.

이것은 사용자 인터페이스 내 사이드바 및 메뉴 구성 요소의 탐색을 처리하는 올바른 방법입니다.

경로를 생성하지 않고 DOM에 탑재된 두 개의 임의 구성 요소 간에 전환하려면 동적 구성 요소를 사용하는 것이 좋습니다.

동적 구성 요소

Vue 동적 구성 요소를 사용하면 사용자는 라우팅 없이 두 개 이상의 구성 요소 간에 전환할 수 있으며 초기 구성 요소로 다시 전환할 때 데이터 상태도 유지할 수 있습니다.

핵심 아이디어는 사용자가 라우터를 사용하지 않고도 사용자 인터페이스에서 구성 요소를 동적으로 마운트 및 마운트 해제할 수 있도록 하는 것입니다.

동적 구성 요소가 중요한 이유는 무엇입니까?

사용자 인터페이스를 디자인할 때 애플리케이션 상태에 따라 중첩된 구성 요소를 표시하거나 숨길 수 있는 일종의 유연성이 필요합니다. 동적 구성 요소는 효율적이고 간단한 방식으로 이 플랫폼을 제공합니다.

이 기능을 사용하면 v-if 및 v-else와 같은 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: &#39;Test2&#39;,
  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 &#39;./components/Test.vue&#39;
import Test2 from &#39;./components/Test2.vue&#39;
export default {
  name: &#39;app&#39;,
  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 &#39;./components/Test.vue&#39;
import Test2 from &#39;./components/Test2.vue&#39;
export default {
  name: &#39;app&#39;,
  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 &#39;./components/Test.vue&#39;
import Test2 from &#39;./components/Test2.vue&#39;
export default {
  name: &#39;app&#39;,
  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>

<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>

<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扩展组件元素的能力。

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

위 내용은 Vue.js에서 동적 구성요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!