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

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

//然后就可以这样来使用
var vE = new myExtend({
     //其它选项
})

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

html:

  <vE></vE>

此时页面必然是没有任何效果的,:

  扩展实例构造器还需要挂载:

              new eE().$mount('eE');

https://www.jb51.net/article/118851.htm

extend 是构造一个组件的语法器。

你给它参数 他给你一个组件 然后这个组件可以用到Vue.component 这个全局注册方法里,

也可以在任意vue模板里使用<componentname>组件

var apple = vue.extend({

  ...

})

Vue.component('componentname',componentname‘)

你可以用到vue实例或者某个组件中的components 属性中并在内容使用template-name

new Vue({

  components:{

    componentname:comontentname

  }

})

Vue.component你可以创建,也可以取组件

Sample:

    var component = Vue.component('componentname')

Vue vue.extend 和vue.component 两则之间的区别的更多相关文章

  1. vue.extend和vue.component的区别

    vue.extend 使用基础 Vue 构造器函数,通过原型继承,(返回)创建一个"子类"(构造器).参数是一个包含组件选项的对象. const Sub = function Vu ...

  2. Vue.extend和Vue.component的联系与差异

    extend 是构造一个组件的语法器. 你给它参数 他给你一个组件 然后这个组件 你可以作用到Vue.component 这个全局注册方法里, 也可以在任意vue模板里使用apple组件 var ap ...

  3. vue中extend/component/mixins/extends的区别

    vue中extend/component/mixins/extends的区别 教你写一个vue toast弹窗组件 Vue.extend构造器的延伸

  4. 前端框架vue.js系列(9):Vue.extend、Vue.component与new Vue

    前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...

  5. Vue与REACT两个框架的区别和优势对比

    VUE和REACT两个JavaScript框架都是当下比较受欢迎的,他们两者之间的区别有那些,各自的优缺点是什么,本文将为你呈现. 简单介绍 除非你最近一直不关注前端的发展,不然你肯定听说过由Face ...

  6. Vue报错之"[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead......"

    一.报错截图 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the p ...

  7. Vue与React两个框架的区别对比

    简单介绍 React--Facebook创建的JavaScript UI框架.它支撑着包括Instagram在内的大多数Facebook网站.React与当时流行的jQuery,Backbone.js ...

  8. vue通过extend动态创建全局组件(插件)学习小记

    测试环境:nodejs+webpack,例子是看文章的,注释为自己的理解 创建一个toast.vue文件: <template> <div class="wrap" ...

  9. "[Vue warn]: Failed to mount component: template or render function not defined"错误的解决

    VUE中动态路由出错: vue.esm.js?a026: [Vue warn]: Failed to mount component: template or render function not ...

随机推荐

  1. Python学习笔记(一)简介总览

    Class 1 一.简介 python:脚本语言.解释型语言 缩进是python语言很重要的一个标志 python3是未来的发展趋势 二.安装 windows: 1.下载安装包: https://ww ...

  2. Android Bug:Error:com.android.dex.DexException: Multiple dex files define Landroid/support/design/widget/CoordinatorLayout$LayoutParams;

    项目编译通过,运行时出现异常: Error:com.android.dex.DexException: Multiple dex files define Landroid/support/desig ...

  3. ANg-基础概念

    分类 机器学习可以分为两类:监督学习(Supervised Learning)和无监督学习(Unsupervised Learning) 监督学习 Supervised Learning 监督学习是从 ...

  4. python 多重继承 深度优先还是广度优先

    我们常说,python2 是深度优先,python3 是广度优先, 其实具体来说是 python2.2 及其以前是深度优先 python2.3及其以后就是广度优先了 python官网 讲解1 以及su ...

  5. CSS----盒子模型与浮动

     盒模型(框模型) 页面上任何一个元素我们都可以看成是一个盒子,盒子会占用一定的空间和位置他们之间相互制约,就形成了网页的布局 w3c的盒模型的构成:content border padding ma ...

  6. go module 命令

    项目目录下,执行以下命令初始化 go mod init 执行以下命令会自动分析项目里的依赖关系同步到go.mod文件中,同时创建go.sum文件 go mod tidy 以上的管理依赖管理操作,所以依 ...

  7. 简单的实现微信获取openid

    微信公众平台获取openid在公众号的开发中有很多用途,前段时间为实现用户使用公众号在登录一次以后可以免密登陆而使用了openid.开发过程中遇到了一些问题,在这里向需要且还没有获取到openid的米 ...

  8. java aop的理解

    https://www.cnblogs.com/mafly/p/SpringAOP.html

  9. flexible

    https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

  10. python list [:1]

    python 切片slice 1.补充: A = np.ones([, , ]) B = np.ones([, ]) C = A*B[:, None, :] C.shape = 2,1,4 https ...