vue3的动态组件是如何工作的

Vue3 的动态组件相比于 Vue2 有了较大的改变,本文将详细讲解 Vue3 的动态组件是如何工作的,包括其实现原理和示例说明。


什么是动态组件

Vue 中的组件是指可复用并具有独立功能的代码块,根据其作用域及其之间的交互可以实现复杂的组件化应用。而动态组件,顾名思义指在运行时可以动态地切换所渲染的组件。

Vue3 中动态组件的实现原理

在 Vue2 中,动态组件使用的是 keep-alive 组件,但是 Vue3 中这种方式已经被废除。现在 Vue3 中实现动态组件的方式主要依赖于 defineAsyncComponentTeleport 组件。

1. defineAsyncComponent

defineAsyncComponent 是 Vue3 中的新 API,当注册一个异步组件时就会返回一个符合标准的 Vue 组件定义对象,这个对象包含了 setup 函数和 render 函数。当使用这个异步组件时,Vue3 会自动运行 setup 函数来执行数据的初始化,然后再运行 render 函数来渲染组件。

2. Teleport 组件

Teleport 是 Vue3 中新引入的一个组件,它可以在外部渲染组件并将其插入到目标组件中。Teleport 组件中有两个可选属性:todisabled

其中,to 属性的值代表了目标组件,在目标组件中需要使用一个与 to 相同的 Teleport 组件来接收插入的组件,同时这个接收组件需要使用 slot 来接收即将插入的组件;disabled 属性表示是否开启 Teleport 插入。

Vue3 中动态组件的示例

  • 示例一:异步动态组件
<template>
  <div>
    <h3>这是异步动态组件的示例</h3>
    <button @click="toggleComponent">切换异步组件</button>
    <teleport to="body">
      <Suspense v-if="showComponent" >
        <MyAsyncComponent />
      </Suspense>
    </teleport>
  </div>
</template>

<script>
import { defineAsyncComponent, Suspense } from 'vue'

// 使用 defineAsyncComponent 声明一个异步组件
const MyAsyncComponent = defineAsyncComponent(() =>
  import('./MyAsyncComponent.vue')
)

export default {
  components: {
    MyAsyncComponent,
  },
  data() {
    return {
      showComponent: false,
    }
  },
  methods: {
    toggleComponent() {
      this.showComponent = !this.showComponent
    },
  },
}
</script>

在上面的示例中,我们使用 defineAsyncComponent 声明了一个异步组件 MyAsyncComponent,当点击按钮时,通过开关 showComponent 属性来切换显示和隐藏组件。

使用 teleportSuspense 组件来异步加载并渲染该组件,teleport 组件的 to 属性值为 body,表示需要将异步组件插入到页面的 body 元素中。

  • 示例二:多个异步组件动态加载
<template>
  <div>
    <h3>这是多个异步组件动态加载的示例</h3>
    <div>
      <button @click="changeComponent(1)">切换异步组件1</button>
      <button @click="changeComponent(2)">切换异步组件2</button>
      <button @click="changeComponent(3)">切换异步组件3</button>
    </div>
    <teleport to="body">
      <template v-if="currentComponent">
        <suspense :fallback="loading"> 
          <component :is="currentComponent" />
        </suspense>
      </template>
    </teleport>
  </div>
</template>

<script>
import { defineAsyncComponent, Suspense, ref } from 'vue'

// 异步组件
const AsyncComponent1 = defineAsyncComponent(() =>
  import('./AsyncComponent1.vue')
)
const AsyncComponent2 = defineAsyncComponent(() =>
  import('./AsyncComponent2.vue')
)
const AsyncComponent3 = defineAsyncComponent(() =>
  import('./AsyncComponent3.vue')
)

export default {
  components: {
    AsyncComponent1,
    AsyncComponent2,
    AsyncComponent3,
  },
  setup() {
    const currentComponent = ref(null)
    const loading = ref('loading')
    const changeComponent = (type) => {
      switch (type) {
        case 1:
          currentComponent.value = 'AsyncComponent1'
          break
        case 2:
          currentComponent.value = 'AsyncComponent2'
          break
        case 3:
          currentComponent.value = 'AsyncComponent3'
          break
      }
    }
    return {
      currentComponent,
      loading,
      changeComponent,
    }
  },
}
</script>

在上述示例中,我们定义了三个异步组件 AsyncComponent1AsyncComponent2AsyncComponent3,并在页面上使用按钮根据需要来切换显示哪个异步组件。

template 标签以 v-if 条件分支的方式为最终显示的组件添加了一个 suspense 组件,并通过 currentComponent 属性值为各个不同的异步组件名称来动态渲染不同的异步组件,当组件加载完成之前,该组件的占位符为 loading

总结

在 Vue3 中,动态组件的实现方式不再是使用 keep-alive 组件来进行组件缓存,而是通过 defineAsyncComponentTeleport 组件来进行动态加载和插入组件,这样做使代码更加简洁且易于理解。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue3的动态组件是如何工作的 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • vue2.0移动端滑动事件vue-touch的实例代码

    下面我将详细讲解vue2.0移动端滑动事件vue-touch的实例代码的完整攻略。 简介 Vue-Touch是一个基于HammerJS封装的适用于Vue2.x的触摸插件。它可以在Vue组件中使用v-touch指令,实现触屏事件的绑定和处理,包括Tap、Doubletap、Press、Swipe、Pinch、Rotate等常见的手势事件。 安装 在使用vue-…

    Vue 2023年5月29日
    00
  • Vue中provide、inject详解以及使用教程

    Vue中provide、inject详解以及使用教程 在Vue的组件嵌套过程中,往往需要在祖先组件中定义一些属性或变量,然后在子组件中使用。虽然可以通过props传递数据来解决问题,但是当组件嵌套层级变多时,props的传递会很繁琐。在这种情况下,Vue中的provide、inject就可以派上用场了。 provide、inject是什么? provide和…

    Vue 2023年5月27日
    00
  • Vue Element前端应用开发之常规的JS处理函数

    Vue Element前端应用开发之常规的JS处理函数 在Vue Element前端应用开发中,JS处理函数是非常常见的。下面给出了一些常见JS处理函数的使用方法和示例。 1. 数组的过滤函数filter() 简介 filter() 是数组的一个常用方法,它返回一个新的被过滤后的数组,原数组不发生变化。 filter() 接受一个回调函数作为参数,该回调函数…

    Vue 2023年5月28日
    00
  • vue基础之模板和过滤器用法实例分析

    让我来为你详细讲解“Vue基础之模板和过滤器用法实例分析”的完整攻略。 一、模板用法示例 1.1 双花括号语法 Vue 的模板语法基于 HTML,并扩展了一些特殊的属性。其中,最常用的是双花括号语法,通过它可以将 Vue 实例中的数据进行渲染。 例如,我们可以使用以下模板代码将 Vue 实例中的 message 数据渲染到页面中: <div id=&q…

    Vue 2023年5月27日
    00
  • vue组合式API浅显入门示例详解

    我来为你详细讲解“vue组合式API浅显入门示例详解”的攻略。 1. 什么是Vue组合式API 在Vue 3.x版本中,新增了一种API叫做“组合式API”,它能够让我们更加灵活地组织和复用组件逻辑。我们可以使用组合式API来处理一些复杂、高级的场景,或者是为了提高组件的可读性和可维护性。相较而言,Vue 2.x版本中的选项API则更偏向于面向对象的方式去编…

    Vue 2023年5月28日
    00
  • JS简单实现父子窗口传值功能示例【未使用iframe框架】

    下面是对“JS简单实现父子窗口传值功能示例【未使用iframe框架】”的详细攻略: 1. 基本实现原理 在父窗口中,定义一个变量保存需要传递的数据 在父窗口中,定义一个函数,该函数将需要传递的数据作为参数传递给子窗口 在子窗口中,定义一个变量保存从父窗口传递来的数据 在子窗口中,通过父窗口定义的函数来接收从父窗口传递来的数据 2. 实现过程示例 2.1 示例…

    Vue 2023年5月28日
    00
  • 构建Vue3桌面应用程序的方法

    构建Vue3桌面应用程序的方法可以分为以下几个步骤: 1. 安装 Vue CLI Vue CLI 是一个官方提供的脚手架工具,可以帮助我们快速创建 Vue.js 项目。可以通过以下命令进行安装: npm install -g @vue/cli # OR yarn global add @vue/cli 2. 创建 Vue 项目 在命令行中执行以下命令来创建一…

    Vue 2023年5月27日
    00
  • Vue.js 中的 v-model 指令及绑定表单元素的方法

    当使用 Vue.js 开发表单时,经常需要将表单元素的值(如文本输入框、单选框、复选框等)与 Vue 组件中的数据进行绑定,这就需要用到 Vue.js 中的 v-model 指令了。下面是具体的操作方法: 绑定文本输入框的值 将文本输入框的值与 Vue 组件中的 data 属性进行双向绑定的方法,示例如下: 在 Vue 组件的 template 中,定义一个…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部