Vue vue.extend 和vue.component 两则之间的区别
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 两则之间的区别的更多相关文章
- vue.extend和vue.component的区别
vue.extend 使用基础 Vue 构造器函数,通过原型继承,(返回)创建一个"子类"(构造器).参数是一个包含组件选项的对象. const Sub = function Vu ...
- Vue.extend和Vue.component的联系与差异
extend 是构造一个组件的语法器. 你给它参数 他给你一个组件 然后这个组件 你可以作用到Vue.component 这个全局注册方法里, 也可以在任意vue模板里使用apple组件 var ap ...
- vue中extend/component/mixins/extends的区别
vue中extend/component/mixins/extends的区别 教你写一个vue toast弹窗组件 Vue.extend构造器的延伸
- 前端框架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 ...
- Vue与REACT两个框架的区别和优势对比
VUE和REACT两个JavaScript框架都是当下比较受欢迎的,他们两者之间的区别有那些,各自的优缺点是什么,本文将为你呈现. 简单介绍 除非你最近一直不关注前端的发展,不然你肯定听说过由Face ...
- 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 ...
- Vue与React两个框架的区别对比
简单介绍 React--Facebook创建的JavaScript UI框架.它支撑着包括Instagram在内的大多数Facebook网站.React与当时流行的jQuery,Backbone.js ...
- vue通过extend动态创建全局组件(插件)学习小记
测试环境:nodejs+webpack,例子是看文章的,注释为自己的理解 创建一个toast.vue文件: <template> <div class="wrap" ...
- "[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 ...
随机推荐
- 通过给事件处理程序传递this参数,获取事件源对象的引用。单机提交按钮时在信息框中显示用户输入的字符。
<script> function mymethod(str) { alert("您输入的是:"+str); } </script><form act ...
- Python类的进阶.md
属性绑定 在python中可以给类对象动态的绑定属性 但是由于这种特性,随意动态绑定也会带来麻烦,因此可用__slots__来限制可绑定的属性名称 __slots__的绑定对于子类是不生效的,只对当前 ...
- iphone上实现H264 硬编码
供ios下h264硬编码sdk,可以生成h264流. 我们的H264 SDK提供了一个理想的软件开发工具包,使您的app可以在iPhone或iPod上实时的访问H264帧数据.SDK提供了一套API功 ...
- HDFS中的集中缓存管理详解
一.背景 Hadoop设计之初借鉴GFS/MapReduce的思想:移动计算的成本远小于移动数据的成本.所以调度通常会尽可能将计算移动到拥有数据的节点上,在作业执行过程中,从HDFS角度看,计算和数据 ...
- Java中Pattern类的quote方法将任何字符串(包括正则表达式)都转换成字符串常量,不具有任何匹配功能
Java中Pattern类的quote方法将任何字符串(包括正则表达式)都转换成字符串常量,不具有任何匹配功能. 下面是个例子: import org.junit.Test; import java. ...
- 我在eclipse输出的第一个hello world!
下学期就要学习JAVA 语言,我现在对它好像还真的是一无所知.记得两次在帮学长做测评的时候,他们都说要装上eclipse.然后从放假我就忙着下载,安装,但是由于官网都是英文,似乎一直在出差错.询问了学 ...
- 对于“2017面向对象程序设计(JAVA)第四周学习总结”存在问题的反馈
对于“2017面向对象程序设计(JAVA)第四周学习总结”存在问题的反馈 “这部分同学博文总结没有写,实验作业没有提交.”——1.关于博文作业.实验作业教学功能的正解:学习知识.暴露问题.衔接课上.2 ...
- mysql 性能测试工具 mysqlslap
原文链接: https://my.oschina.net/moooofly/blog/152547 连接数据库: # mysqlslap -h localhost -uroot -p123456 -- ...
- NBU 还原LINUX ORACLE RAC数据库(MIDDB)
MIDDB集群数据库恢复 目录 MIDDB集群数据库恢复... 1 1.安装 NBUcilent 1 2.修改hosts文件... 2 3.修改hosts文件... 2 4.使用bplis读取备份文件 ...
- usb-blaster安装
插入usb-blaster后,无法安装驱动,一直显示感叹号,更新驱动后显示“文件的哈希值不在指定的目录”这样的错误提示,解决方法如下:1.Windows键+ R,输入shutdown.exe /r / ...