Vue中extend组件的用法

最新推荐文章于 2025-05-25 17:14:18 发布
最新推荐文章于 2025-05-25 17:14:18 发布
阅读量1.4k 收藏 3
点赞数 1
CC 4.0 BY-SA版权
原文链接：https://www.jianshu.com/p/22c6a17f50a1
本文详细讲解了Vue.extend的正确使用方法，强调其作为组件构造器而非实例的角色，并演示了如何通过Vue.components进行注册。同时，文章指出在实例化时应使用propsData而非props，并且data定义必须是函数。

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

Vue.extend的用法

一、 extend创建的是一个组件构造器，而不是一个具体的组件实例

    所以他不能直接在new Vue中这样使用： new Vue({components: first})

   最终还是要通过Vue.components注册才可以使用的。

      创建一个div容器放置组件

创建一个子组件

创建一个父组件

 

局部注册以及全局注册的示例写法

 

结果为：

 

二、在实例化extends组件构造器时，传入属性必须是propsData、而不是props。另外，无论是Vue.extend还是Vue.component 里面的data定义都必须是函数返回对象，如 Vue.extend({data: function () {return {}}})。除了new Vue可以直接对data设置对象之外吧，如 new Vue({data: {}});


 

用Vue.extend构建消息提示组件的方法实例
12-10
前提 前段时间自己做的vue练手项目，需要一个通用的消息提示组件，但是消息提示这种组件我更想用方法来调用，而不是在各个页面上都添加个组件（那样感觉很麻烦，重度懒癌患者），于是就上网差查了查，并研究了ElementUI的message源码。自己弄出来一个简陋的消息提示组件 Vue.extend是什么 按照官方文档说法，他是一个类构造器，用来创建一个子类vue并返回构造函数，而Vue.component它的任务是将给定的构造函数与字符串ID相关联，以便Vue.js可以在模板中接收它。 了解了这点之后我们开始做我们的消息提示组件吧。 消息提示组件 首先我们先创建我们的提示组件的模板 <templ
vue.extend的使用
m0_46179722的博客
10-29 1739
在Vue2中，Vue.extend。
Vue.extend
最新发布
weixin_46282323的博客
05-25 676
摘要： Vue.extend 是 Vue 2 中基于组件配置创建可复用构造函数的 API，常用于动态生成弹窗、消息提示等组件。其核心是通过继承 Vue 构造器生成新构造函数，支持实例化、propsData 传参及手动挂载。但在 Vue 3 中已被移除，推荐使用 defineComponent 和 Composition API 替代。 关键点： 用途：动态组件、插件封装（如弹窗） 原理：继承 Vue 构造器，生成可实例化的子类 注意事项：需手动销毁实例，避免内存泄漏 Vue 3 替代方案：defineCom
Vue中extend基本用法
Hi,印象钟情
09-08 2649
可以看到，extend 创建的是 Vue 构造器，而不是我们平时常写的组件实例，所以不可以通过 new Vue({ components: testExtend }) 来直接使用，需要通过 new Profile().$mount(’#mount-point’) 来挂载到指定的元素上。我个人的理解来看，extend提供了一个能够构造组件的函数（也就是构造器）。在一些特定的应用场景（如自己构建一个复杂弹窗）下，我们使用这种函数式的构造组件的方法，会更灵活一些。(2) 新建messageBox.js。
使用Vue.extend封装组件
u010227042的博客
03-17 1314
既然要使用Vue.extend（）封装组件，那这玩意儿到底是什么呢？我们且来看官方解释。
Vue中通过Vue.extend动态创建实例的方法
12-09
在Vue中，如果我们想要动态地来控制一个组件的显示和隐藏，比如通过点击按钮显示一个对话框或者弹出一条信息。我们通常会提前写好这个组件，然后通过v-if = “show”来控制它的显示隐藏。如下所示： <button...
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
10-17
在这篇文章中，我们将深入探讨Vue.js框架中的组件（component）相关知识点，特别是Vue.extend、组件模板（component template）以及动态组件（dynamic component）的用法。文章通过实例代码的形式，向读者展示了如何...
vue.extend实现alert模态框弹窗组件
08-27
在上面的代码中，我们使用Vue.extend方法来创建一个组件构造器，名称为alertHonor。该构造器是基于alert.vue文件的模板来生成的。 组件的使用 下面是我们如何使用该组件的代码： ```javascript export default ...
详解Vue 中 extend 、component 、mixins 、extends 的区别
08-28
在实际使用中，`Vue.extend`主要用于创建可复用的组件构造器，而`mixins`和`extends`则用于在组件之间共享和扩展功能。`mixins`通常用于多个组件之间共有的逻辑，而`extends`更倾向于保持组件的独立性，同时添加额外...
关于vue.extend和vue.component的区别浅析
12-10
前言 最近一个朋友问我vue.extend和vue.component两者之间有什么区别？突然这么一问竟答不出来，回来想想有必要总结下，所以本文就来给大家介绍关于vue.extend和vue.component的区别，下面话不多说了，来一起看看详细的介绍吧。 Vue.extend 返回的是一个“扩展实例构造器”，也就是一个预设了部分选项的 Vue 实例构造器 var myVue = Vue.extend({ // 预设选项 }) // 返回一个“扩展实例构造器” // 然后就可以这样来使用 var vm = new myVue({ // 其他选项 }) Vue.component 是用来
vue extend的使用以及自定义弹窗实例
weixin_45558926的博客
12-29 1403
白话Vue.extend（自定义弹窗） ​ 在使用vue开发中，大部分情况下我们都使用组件的方式进行渲染，但是在某些情况下，组件渲染确实带来很多问题（主要是麻烦），比如说，我需要一个确认弹窗，那么，一般情况下，大概会有下面一个流程：引入弹窗组件 =》声明部分弹窗需要的变量 =》 点击弹窗触发按钮 =》临时存储弹窗可能需要的部分变量参数 =》 弹窗回掉方法； ​ 如果一个文件中包含多个弹窗信息，那么其中的重复工作量可以想象，确实比较麻烦，那么问题来，可不可以把这个问题简单化呢，嗯，，，我想到了一个偷懒的方法，
vue.extend挂载组件
weixin_43989307的博客
04-27 1219
遇到的问题 vue2在抽离组件时，要求按需加载，没有改组件的请求数据时，不加载此组件，有数据才加载 解决方法 方法一 v-if 这个可以说是很经典的一个办法,但是会有展示上的问题,即dom结构会先消失而后重新渲染 并不算是一个完美的解决方案,所以暂时Pass掉 方法二 通过$set来触发Vue的数据重新渲染机制(鸡肋), 大多数情况下要配合监听来使用 方法三 （推荐） 使用vue.extend()将组件挂载在指定DOM上 Vue.extend()方法其实是Vue的一个构造器，继承自Vue，创建一个
vue.extend和vue.component
liubangbo的专栏
06-14 2090
文章转自：https://blog.csdn.net/dkr380205984/article/details/80116024 需求：构建一个类似elment-ui的组件库，打包发布到npm 个人探索：webpack打包发布到npm流程 --> 组件开发环境和组件发布环境探索 -->两种类型的组件 个人探索流程和实际流程基本是反着来的 本文目标：完成...
Vue.extend动态组件
qq_38152997的博客
09-05 1337
Vue.extend 属于 Vue 的全局 API，在实际业务开发中我们很少使用，因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中，Vue.extend + $mount 这对组合是我们需要去关注的。 Vue.extend( options ) 参数： {Object} options 用法： 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 data 选项是特例，需要注意 - 在 Vue.extend() 中它必
vue -- 组件构造器(extend)
aina0674的博客
04-19 384
extend创建的是一个组件构造器，而不是一个具体的组件实例，最终还是要通过Vue.component注册才可以使用 组件构造器相当于Vue.component()方法的第二个参数部分 const Loading = Vue.extend({ template: ``, data () { return { hello: '' ...
Vue中 Vue.extend() 详解及使用
qq_42931285的博客
07-07 734
Vue.extend用法
Vue中extend组件构造器
HAINIHAOya的博客
03-30 1715
vue-创建构造函数 Vue.extend属于Vue的全局API在业务开发时的很少使用，但是在一些独立组件开发场景中， Vue.extend( options )+$mount Vue.extend( options ) 参数： {Object} options 用法： 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数 <div id="mount-point"></div&
vue.extend中使用组件
09-06
在Vue中，可以使用`Vue.extend`方法来创建一个可复用的组件。这个方法接受一个包含组件选项的对象，并返回一个构造函数，该构造函数可以用来创建组件实例。 下面是一个示例，展示如何在`Vue.extend`中使用组件： ```javascript // 创建一个组件构造函数 const MyComponent = Vue.extend({ template: '<div>This is my component</div>' }); // 使用组件构造函数创建组件实例 const myInstance = new MyComponent(); // 将组件实例挂载到DOM中 myInstance.$mount('#app'); ``` 在上面的示例中，我们首先使用`Vue.extend`方法创建了一个名为`MyComponent`的组件构造函数。然后，我们使用这个构造函数创建了一个组件实例`myInstance`。最后，我们使用`$mount`方法将组件实例挂载到HTML中的`#app`元素上。 这样，组件就会被渲染并显示在指定的DOM元素中。你可以根据自己的需求定义更多的组件选项，例如数据、生命周期钩子、计算属性等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值