关于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 相关文章推荐
监控 url fragment变化的js代码
Apr 19 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
js显示文本框提示文字的方法
May 07 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
基于jquery编写分页插件
Mar 07 Javascript
vue组件与复用详解
Apr 08 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 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极大的增强功能和性能
2006/10/09 PHP
一个PHP数组应该有多大的分析
2009/07/30 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
Javascript简单实现可拖动的div
2013/10/22 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
简单的分页代码js实现
2016/05/17 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
在Python中操作字典之update()方法的使用
2015/05/22 Python
python使用pymysql实现操作mysql
2016/09/13 Python
Python模拟三级菜单效果
2017/09/11 Python
使用tensorflow实现线性svm
2018/09/07 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
python 下载文件的多种方法汇总
2020/11/17 Python
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
求职信模版
2013/11/30 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
离职告别感言
2015/08/04 职场文书
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL