首页> 基础笔记 >Vue学习笔记 Vue学习笔记

vue动态组件基本介绍

作者：小萝卜 2024-03-19 【 Vue 】浏览 123

简介动态组件（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>

执行效果：