关于vue.extend和vue.component的区别浅析


Posted in Javascript onAugust 16, 2017

前言

最近一个朋友问我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.extend和vue.component的区别浅析

就是创建一个vue实例咯 返回一个vm实例 。api中vm的说明就是new Vue创建的

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 #Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 #jQuery
详谈表单重复提交的三种情况及解决方法
Aug 16 #Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 #Javascript
Node.js 的模块知识汇总
Aug 16 #Javascript
vue绑定设置属性的多种方式(5)
Aug 16 #Javascript
jQuery中each循环的跳出和结束实例
Aug 16 #jQuery
You might like
php实现用于删除整个目录的递归函数
2015/03/16 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
twig模板常用语句实例小结
2016/02/04 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
python中format()函数的简单使用教程
2018/03/14 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
Python 移动光标位置的方法
2019/01/20 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
Python requests模块cookie实例解析
2020/04/14 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
大学生的应聘自我评价
2013/12/13 职场文书
《中华少年》教学反思
2014/02/15 职场文书
小学教师岗位职责
2015/04/02 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python