vue.extend, vue.component 区别

vue.extend, vue.component有什么区别

阅读 27.8k
4 个回答

如楼上所说 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创建的

clipboard.png

希望可以加深你理解

Vue.extend 返回的是一个“扩展实例构造器”,也就是一个预设了部分选项的 Vue 实例构造器

var myVue = Vue.extend({
  // 预设选项
}) // 返回一个“扩展实例构造器”

// 然后就可以这样来使用
var vm = new myVue({
  // 其他选项
})

Vue.component 是用来全局注册组件的方法,其作用是将通过 Vue.extend 生成的扩展实例构造器注册(命名)为一个组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时,会自动调用类似于 new myVue 这样的构造函数来生成组件实例,并挂载到自定义元素上,当然实际情况要比这复杂得多,还需要处理 props 数据传递、slot 内容分发、自定义事件、组件生命周期……事宜。

可参考我做的 组件开发示例代码详解:https://kingmario.github.io/v...

new Vue是一个实例
vue.extend 组件构造器 需要传入component进行注册
vue.component直接注册组件内部已经自动构造了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏