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. ARP欺骗与MITM(中间人攻击)实例

    ARP协议(address resolution protocol):地址解析协议 一台主机和另一台主机通信,要知道目标的IP地址,但是在局域网中传输数据的网卡却不能直接识别IP地址,所以用ARP解析 ...

  2. Android app 性能优化的思考--性能卡顿不好的原因在哪?

    说到 Android 系统手机,大部分人的印象是用了一段时间就变得有点卡顿,有些程序在运行期间莫名其妙的出现崩溃,打开系统文件夹一看,发现多了很多文件,然后用手机管家 APP 不断地进行清理优化 ,才 ...

  3. LeetCode OJ 450. Delete Node in a BST

    Given a root node reference of a BST and a key, delete the node with the given key in the BST. Retur ...

  4. 2008-03-18 22:58 oracle基础知识小结

    oracle 数据类型: 字段类型                 中文说明                                                  限制条件         ...

  5. (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]

    https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...

  6. HttpWatch Professional Edition 7.2.13下载含( license.lic )

    下载地址: http://download.httpwatch.com/httpwatchpro.exe httpwatch.lic     # program.     #     # You ca ...

  7. quartz 实例

    第一步:添加jar包 第二步:在spring配置文件中添加 <context:annotation-config/> 第三步:编写定时代码 我们通常做Java后台接口,是让前端访问的,让前 ...

  8. Pandas数据排序

    Pandas数据排序 .sort_index() 在指定轴上根据索引进行排序,索引排序后内容会跟随排序 b = pd.DataFrame(np.arange(20).reshape(4,5),inde ...

  9. linux centos 访问根目录 not accessable

    chmod 777 root 即可 或  chmod a+x root https://blog.csdn.net/CSDN_GYG/article/details/73276310

  10. 03_java基础(五)之项目结构搭建

    1.结构图 2.dao代码编辑 package com.day01.station.dao; /** * Created by Administrator on 2018/2/1. */ public ...