关于vue.extend和vue.component的区别浅析
更新时间：2017年08月16日 09:06:18 投稿：daisy
最近工作中遇到了vue.extend,vue.component，但二者之间的区别与联系是什么呢？下面这篇文章主要给大家介绍了关于vue.extend和vue.component区别的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
前言
最近一个朋友问我vue.extend和vue.component两者之间有什么区别？突然这么一问竟答不出来，回来想想有必要总结下，所以本文就来给大家介绍关于vue.extend和vue.component的区别，下面话不多说了，来一起看看详细的介绍吧。
Vue.extend 返回的是一个“扩展实例构造器”，也就是一个预设了部分选项的 Vue 实例构造器
var myVue = Vue.extend({
// 预设选项
}) // 返回一个“扩展实例构造器”
// 然后就可以这样来使用
var vm = new myVue({
// 其他选项
})
Vue.component 是用来全局注册组件的方法，其作用是将通过 Vue.extend 生成的扩展实例构造器注册（命名）为一个组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用类似于 new myVue 这样的构造函数来生成组件实例，并挂载到自定义元素上，当然实际情况要比这复杂得多，还需要处理 props 数据传递、slot 内容分发、自定义事件、组件生命周期……事宜。
在网上看到了一个网友的分析也分享给大家，如下：
extend 是构造一个组件的语法器.
你给它参数 他给你一个组件 然后这个组件
你可以作用到Vue.component 这个全局注册方法里， 也可以在任意vue模板里使用<apple>组件
var apple = Vue.extend({
....
})
Vue.component('apple',apple)
你可以作用到vue实例或者某个组件中的components属性中并在内部使用apple组件
new Vue({
components:{
apple:apple
}
})
Vue.component 你可以创建 ，也可以取组件 例如下
var apple = Vue.component('apple')
new Vue
就是创建一个vue实例咯 返回一个vm实例 。api中vm的说明就是new Vue创建的
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
想要实现一个简洁版的Mini-Vue框架，应该包含三个模块：分别是：渲染系统模块、可响应式系统模块、应用程序入库模块，本文主要介绍的是渲染系统模块的实现，需要的可以参考一下2023-07-07
在Vue项目开发过程中,当遇到应用逻辑出现错误,但又无法准确定位的时候,知晓Vue项目调试技巧至关重要,debug是必备技能,这篇文章主要给大家介绍了关于intellij idea+vue前端调试配置的相关资料,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了iview Upload组件多个文件上传的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
el-table中在嵌套一个el-table,这样数据格式就没问题了,主要就是样式,将共同的列放到一列中,通过渲染自定义表头render-header,将表头按照合适的宽度渲染出来,本文给大家分享el-table实现嵌套表格的展示功能,感兴趣的朋友一起看看吧2024-02-02
在前端开发中,数据分页是一个常见的需求,特别是当处理大量数据时,Vue作为一款流行的JavaScript框架,提供了强大的工具和生态系统来实现数据分页,本文将介绍如何在Vue中进行数据分页,以及如何设计一个通用的分页组件,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了在Vue 中获取下拉框的文本及选项值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了Vue实现表格首列相同数据合并的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-04-04
本篇文章记录仿写一个el-tooltip组件细节，从而有助于大家更好理解饿了么ui对应组件具体工作细节，本文是elementui源码学习仿写系列的又一篇文章，后续空闲了会不断更新并仿写其他组件2023-07-07
Vue ElementUI table实现双击修改编辑某个内容的方法
在实现表格单元格双击编辑功能时,需使用@cell-dblclick事件来触发双击操作,将单元格切换为input输入框,通过ref引用和绑定失焦及回车事件来确认编辑,同时,需要处理编辑数据的更新和方法逻辑的完善2024-09-09
在开发Vue.js应用时,Vue.js Devtools是一个不可或缺的调试工具,然而,有时我们可能会遇到“Vue.js not detected”的提示,这意味着Vue.js Devtools未能成功识别和连接到我们的Vue应用,本文将详细解析这个问题,并提供相应的解决步骤与代码示例,需要的朋友可以参考下2024-01-01
最新评论