关于vue.extend和vue.component的区别浅析
转载 2017-08-16 投稿：daisy 
我要评论
最近工作中遇到了vue.extend,vue.component，但二者之间的区别与联系是什么呢？下面这篇文章主要给大家介绍了关于vue.extend和vue.component区别的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
<div id="content">
<p><span style="color: #ff0000"><strong>前言</strong></span></p>
最近一个朋友问我vue.extend和vue.component两者之间有什么区别？突然这么一问竟答不出来，回来想想有必要总结下，所以本文就来给大家介绍关于vue.extend和vue.component的区别，下面话不多说了，来一起看看详细的介绍吧。
Vue.extend 返回的是一个“扩展实例构造器”，也就是一个预设了部分选项的 Vue 实例构造器
|
1
2
3
4
5
6
7
8
|
var
myVue = Vue.extend({
// 预设选项
})
// 返回一个“扩展实例构造器”
// 然后就可以这样来使用
var
vm =
new
myVue({
// 其他选项
})
|
Vue.component 是用来全局注册组件的方法，其作用是将通过 Vue.extend 生成的扩展实例构造器注册（命名）为一个组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用类似于 new myVue 这样的构造函数来生成组件实例，并挂载到自定义元素上，当然实际情况要比这复杂得多，还需要处理 props 数据传递、slot 内容分发、自定义事件、组件生命周期……事宜。
在网上看到了一个网友的分析也分享给大家，如下：
extend 是构造一个组件的语法器.
你给它参数 他给你一个组件 然后这个组件
你可以作用到Vue.component 这个全局注册方法里， 也可以在任意vue模板里使用<apple>组件
|
1
2
3
4
5
|
var
apple = Vue.extend({
....
})
Vue.component(
'apple'
,apple)
|
你可以作用到vue实例或者某个组件中的components属性中并在内部使用apple组件
|
1
2
3
4
5
|
new
Vue({
components:{
apple:apple
}
})
|
Vue.component 你可以创建 ，也可以取组件 例如下
|
1
|
var
apple = Vue.component(
'apple'
)
|
new Vue
就是创建一个vue实例咯 返回一个vm实例 。api中vm的说明就是new Vue创建的
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
<div class="art_xg">
已为社区贡献2条内容
所有评论(0)