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. openwrt手动wifi设成client模式[笔记]

    说明:刚刷好的OPENWRT,默认是不带luci-web管理的,所以得手工SSH或TELNET上去改WIFI模式,以便通过WIFI连到现有的ROUTER去下载安装luci...: root@OpenW ...

  2. Structs复习 开始 第一个helloworld项目

    大体已经学完ssh了  感觉一起做一个项目有点难 计划先用一下独立的Structs 然后再把数据库操作换成hibernate  然后在用Spring 整合 计划用10天左右吧 但今天开始用Struct ...

  3. lucene solr

    理解 lucene 是一个全文搜索的引擎 solr是全文搜索的web实现 --------------------.  java.lang.UnsupportedClassVersionError:  ...

  4. 前端Web安全介绍及规避。。。

    本文转载自:https://jelon.top/posts/web-security/ 如果侵权,请及时告知. 一.跨站脚本攻击 (xss) 反射型跨站脚本攻击 攻击者会通过社会工程学手段,发送一个 ...

  5. yii添加验证码 和重复密码

    <?phpnamespace frontend\models; use common\models\User;use yii\base\Model;use Yii; /** * Signup f ...

  6. 前端路由两种模式:hash、history

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  7. Java url爬虫

    java 爬虫抓取 可以在线编辑java代码的连接http://www.runoob.com import java.util.Scanner; import java.util.ArrayList; ...

  8. 详解 Tomcat 的连接数与线程池

      前言 在使用tomcat时,经常会遇到连接数.线程数之类的配置问题,要真正理解这些概念,必须先了解Tomcat的连接器(Connector). 在前面的文章 详解Tomcat配置文件server. ...

  9. Loading AssetBundle Manifests

    [Loading AssetBundle Manifests] AssetBundle Manifest 可以用于获取dependency. AssetBundle assetBundle = Ass ...

  10. onMouseOver&onMouseOut vs onMouseEnter&onMouseLeave

    [onMouseOver&onMouseOut vs onMouseEnter&onMouseLeave] 1.onmouseleave.onmouseenter,鼠标进入到指定元素区 ...