当前位置: 首页 > news >正文

vue extend的作用和使用方法

Vue.extend 是 Vue.js 提供的一个全局 API,用于扩展 Vue 组件。它的作用是创建一个可以被多次使用的组件构造器,可以像普通组件一样使用,并且可以在多个地方可以实例化该组件。

Vue.extend 的原理是通过 Vue.extend 方法创建一个新的构造器,该构造器继承自 Vue,然后可以像普通组件一样使用。通过new 一个Vue.extend构造的组件实例,然后通过$mount()挂载到指定dom节点,这对于很多老项目中使用原生js去构建dom提供了便捷的方法,Vue.extend方法通过提供组件的复用、‌扩展、‌动态实现以及原型方法扩展等功能,‌能够更好地组织和管理代码,‌实现组件的灵活使用和功能定制

// 创建一个可以被多次使用的组件构造器
const extendVue= Vue.extend({// 组件的选项template: '<div>{{ message }}</div>',data() {return {message: 'Hello, World!'}}
})// 创建实例
const instance = new extendVue().$mount('#app')

也可以是

// 创建一个可以被多次使用的组件构造器
import testVue from './test.vue'
const extendVue= Vue.extend(testVue)// 创建实例
const instance = new extendVue({propsData: {}
}).$mount("#app")

这里的propsData,跟vue的props一样,传递到test.vue中后,可以在props中看到

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • vue3 + tsx 表格 Action 单独封装组件用法
  • three完全开源扩展案例02-跳动的音乐
  • Blender新手入门笔记收容所(一)
  • Apache Seata应用侧启动过程剖析——RM TM如何与TC建立连接
  • 【LeetCode:1071. 字符串的最大公因子 + 模拟 + 最大公约数】
  • 【PythonRS】基于Python分块处理大型遥感影像的方法
  • 计算机网络浅谈—什么是 OSI 模型?
  • 普中51单片机:定时器与计数器详解及应用(七)
  • 【eNSP模拟实验】三层交换机实现VLAN通信
  • STL(一)
  • 如何将canvas画布变成一张img图片
  • 光伏电站逆变器选型方法
  • Power BI数据分析可视化实战培训
  • 【UNI-APP】阿里NLS一句话听写typescript模块
  • web后端开发--请求响应
  • AzureCon上微软宣布了哪些容器相关的重磅消息
  • C++类的相互关联
  • CSS魔法堂:Absolute Positioning就这个样
  • Java程序员幽默爆笑锦集
  • js递归,无限分级树形折叠菜单
  • js正则,这点儿就够用了
  • Linux快速复制或删除大量小文件
  • php ci框架整合银盛支付
  • Puppeteer:浏览器控制器
  • Python3爬取英雄联盟英雄皮肤大图
  • Service Worker
  • Vue UI框架库开发介绍
  • 分类模型——Logistics Regression
  • 看域名解析域名安全对SEO的影响
  • 盘点那些不知名却常用的 Git 操作
  • 前端面试总结(at, md)
  • 学习使用ExpressJS 4.0中的新Router
  • 原生 js 实现移动端 Touch 滑动反弹
  • 在GitHub多个账号上使用不同的SSH的配置方法
  • mysql面试题分组并合并列
  • 新海诚画集[秒速5センチメートル:樱花抄·春]
  • ‌U盘闪一下就没了?‌如何有效恢复数据
  • # Swust 12th acm 邀请赛# [ A ] A+B problem [题解]
  • # 详解 JS 中的事件循环、宏/微任务、Primise对象、定时器函数,以及其在工作中的应用和注意事项
  • ## 基础知识
  • #pragma预处理命令
  • $(document).ready(function(){}), $().ready(function(){})和$(function(){})三者区别
  • (12)Linux 常见的三种进程状态
  • (C语言)输入一个序列,判断是否为奇偶交叉数
  • (k8s)Kubernetes 从0到1容器编排之旅
  • (层次遍历)104. 二叉树的最大深度
  • (超详细)语音信号处理之特征提取
  • (二十九)STL map容器(映射)与STL pair容器(值对)
  • (介绍与使用)物联网NodeMCUESP8266(ESP-12F)连接新版onenet mqtt协议实现上传数据(温湿度)和下发指令(控制LED灯)
  • (三)elasticsearch 源码之启动流程分析
  • (十)Flink Table API 和 SQL 基本概念
  • (算法)硬币问题
  • *p=a是把a的值赋给p,p=a是把a的地址赋给p。
  • ./configure、make、make install 命令
  • .gitignore不生效的解决方案