Vue.js에서 동적 구성요소를 사용하는 방법
- 青灯夜游앞으로
- 2020-09-28 17:28:494207검색
이 문서에서는 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: '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>🎜코드 편집기(Visual Studio 권장) 명령을 실행하여 Node.js 버전 10.x가 있는지 확인할 수 있습니다. 🎜🎜컴퓨터에 전 세계적으로 설치된 최신 버전의 Vue입니다. 🎜🎜Vue CLI 3.0이 컴퓨터에 설치되어 있습니다. 이렇게 하려면 먼저 이전 CLI 버전을 제거하십시오. 🎜
<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>🎜 그런 다음 새 버전을 설치하십시오. 🎜rrreee🎜🎜🎜 동적 구성 요소 구문 🎜🎜🎜🎜Vue는 간단히 comComponent라고 하는 동적 구성 요소를 위한 특수 템플릿 요소를 제공합니다. . 구문은 다음과 같습니다. 🎜rrreee🎜구성요소 요소는 자체 닫는 태그일 수도 있습니다.🎜rrreee🎜첫 번째 옵션은 탐색 호환성에 가장 적합합니다.
🎜🎜🎜🎜Demo🎜🎜🎜🎜시작 프로젝트를 다운로드하고 VS Code에서 열어 동적 구성 요소의 몇 가지 예를 확인하세요.
스타터 프로젝트를 사용하면 기존 테스트 구성 요소에 액세스하고, 두 번째 테스트 구성 요소를 만들고, 둘 사이를 전환할 수 있습니다. 🎜🎜 composites 폴더로 이동하여 새 파일을 만듭니다. 파일 이름을 Test2.vue로 지정하고 다음 코드 블록을 파일에 복사합니다. 🎜rrreee🎜이제 두 번째 구성 요소가 있으므로 App.vue 파일로 이동하여 등록합니다. 구성 요소: 🎜rrreee🎜 이제 두 개의 테스트 구성 요소가 루트 애플리케이션 구성 요소 내에 중첩됩니다. 하나의 구성요소만 마운트한 후 다른 구성요소로 동적으로 전환하려면 동적 구성요소를 생성해야 합니다. 🎜🎜다음 코드 블록을 app.vue 파일의 템플릿 섹션에 복사하세요. 🎜rrreee🎜다음으로, 다음 serve 명령을 사용하여 애플리케이션을 실행하세요. 🎜rrreee🎜You Test 1 구성 요소만 표시되는 것을 볼 수 있습니다. 🎜🎜이것은 템플릿에 Test 1 요소만 지정된 경우 얻을 수 있는 응답입니다. 구성 요소를 동적으로 만들려면 v-bind 지시문을 사용하여 해당 구성 요소를 set 속성에 바인딩할 수 있습니다. 🎜rrreee🎜이제 구성 요소가 데이터의 구성 요소 속성에 바인딩됩니다. 구성 요소를 Test2로 전환하면 Test2 구성 요소가 자동으로 마운트됩니다. 🎜🎜브라우저에서 테스트해보세요. 🎜🎜🎜🎜메서드 호출 추가🎜🎜🎜🎜메서드 호출을 추가하여 구성 요소의 동적 표시 논리를 제어할 수 있습니다. 구성요소 요소를 사용하면 Vue 인스턴스의 모든 구성에 액세스할 수 있습니다. 🎜🎜다음은 이 두 구성 요소를 전환하는 작은 방법의 예입니다. 🎜rrreee🎜🎜🎜전환 시 데이터 값을 유효하게 유지🎜🎜🎜🎜Vue 팀이 이 기능을 구축했을 때 저장 기능을 포함하도록 기능을 확장하기로 결정했습니다. 각 상태의 데이터 값입니다. 🎜🎜이 데이터를 저장하기 위해 Vue는 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扩展组件元素的能力。
相关推荐：
更多编程相关知识，请访问：编程入门！！
위 내용은 Vue.js에서 동적 구성요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!