关于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 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
vue axios用法教程详解
Jul 23 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
微信小程序云开发之模拟后台增删改查
May 16 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 jQuery表单,带验证具体实现方法
2014/02/15 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
JavaScript访问样式表代码
2010/10/15 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python发送email的3种方法
2015/04/28 Python
Python实现截屏的函数
2015/07/26 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
python ---lambda匿名函数介绍
2019/03/13 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
用python制作个音乐下载器
2021/01/30 Python
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
为什么会有内存对齐
2016/10/10 面试题
小学教师先进事迹材料
2014/12/15 职场文书
单身申明具结书
2015/02/26 职场文书
实习单位推荐信
2015/03/27 职场文书
市场部岗位职责范本
2015/04/15 职场文书
地雷战观后感
2015/06/09 职场文书
创业计划书之水果店
2019/07/18 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书