首页> 基础笔记 >Vue学习笔记 >组件 组件
vue动态组件基本介绍
作者:小萝卜 2024-03-19 【 Vue 】 浏览 1085
简介动态组件(Dynamic Components)是一种在 Vue 中根据条件或用户输入来动态渲染不同组件的技术。在 Vue 中使用动态组件,可以使用 <component> 元素,并通过 is 特性绑定一个组件的名称或组件对象。通过在父组件中改变 is 特性的值,可以动态切换渲染的组件。
动态组件的基本使用
动态组件(Dynamic Components)是一种在 Vue 中根据条件或用户输入来动态渲染不同组件的技术。
在 Vue 中使用动态组件,可以使用 <component> 元素,并通过 is 特性绑定一个组件的名称或组件对象。通过在父组件中改变 is 特性的值,可以动态切换渲染的组件。
有些场景会需要在两个组件间来回切换,比如 Tab 界面。
写法:
<!-- currentTab 改变时组件也改变 -->
<component :is="tabs[currentTab]"></component>
实例:
<template>
<div class="container">
<!-- 使用属性绑定指令将指定的数据绑定到属性中 -->
<component v-bind:is="show"></component>
<button @click="transfer()">Transfer</button>
</div>
</template>
<script>
// 导入组件
import First from '@/components/First.vue';
import Last from '@/components/Last.vue';
export default {
// 定义数据
data() {
return {
show: 'First'
}
},
// 注册组件
components: {
First,
Last
},
// 定义事件处理函数
methods: {
transfer() {
if(this.show === 'First'){
this.show = 'Last';
}else{
this.show = 'First';
}
}
}
}
</script>
执行效果:
很赞哦! (0)