vue.extend构造器

最新推荐文章于 2025-05-25 17:14:18 发布

明天又会在哪里

最新推荐文章于 2025-05-25 17:14:18 发布

阅读量534

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue学习文章标签： vue extend构造器

本文链接：https://blog.youkuaiyun.com/xuefeng11111/article/details/88371746

Vue学习专栏收录该内容

29 篇文章

订阅专栏

本文深入探讨Vue.extend构造器的功能，展示如何通过该构造器创建自定义类来动态生成DOM元素，以Loading组件为例，详细讲解了从创建、实例化到挂载的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上一个参考链接，觉得帮助很大: Vue 2.0学习笔记：Vue.extend构造器的延伸
然后拿vue官网的话解释vue.extend：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
什么意思，我的理解其实就是创建一个自己的类，可以通过类的实例化动态创建dom元素
接下来以Loading实例演示一下用法

首先，我们创建一个Loading文件夹，并在其中创建index.vue和index.js两个文件
然后，我们在index.vue中输入一些内容
index.js中的内容如下

import Vue from 'vue' // 引入Vue
import Loading from './index.vue' // 引入要动态创建的vue模板

const LoadingConstructor = Vue.extend(Loading) // 创建一个Loading类

let newLoading

// 创建并导出showLoading方法
export const showLoading = (option = {}) => {
  newLoading = new LoadingConstructor().$mount() // 实例化Loading类，并挂载
  document.querySelector(option.container || 'body').appendChild(newLoading.$el) // 将生成的元素挂载到option.container元素或者body元素上
}

// 创建并导出hideLoading方法
export const hideLoading = () => {
  newLoading.$el.parentNode.removeChild(newLoading.$el)
}