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 ...
随机推荐
- 记录Git的安装过程
从https://git-scm.com/download/win,选择Windos版本下载. 选择打开的工具,用的Notepad. 下一步 下一步
- 102/107. Binary Tree Level Order Traversal/II
原文题目: 102. Binary Tree Level Order Traversal 107. Binary Tree Level Order Traversal II 读题: 102. 层序遍历 ...
- ubuntu16.04获取root权限并用root用户登录
写在全面:如果根据以下教程涉及到只读文件需要更改文件权限才能需修改文件内容,参考我的另一篇博客:https://www.cnblogs.com/masbay/p/10744900.html中的第2条. ...
- atrous convolution
atrous convolution 简而言之,带孔卷积: 来自:https://zhuanlan.zhihu.com/p/27470685 假设一个二维信号,每个位置对应的输出为和卷积核为,带孔卷积 ...
- hdu5391-Zball in Tina Town-威尔逊定理(假证明)
Tina Town is a friendly place. People there care about each other. Tina has a ball called zball. Zba ...
- get请求中url传参中文乱码问题--集锦
一:get请求url中带有中文参数,有三种方式进行处理防止中文乱码 1.如果使用tomcat作为服务器,那么修改tomcat配置文件conf/server.xml中,在 <Connector ...
- Spring <tx:annotation-driven>注解 JDK动态代理和CGLIB动态代理 区别。
基于JDK动态代理和CGLIB动态代理的实现Spring注解管理事务(@Trasactional)到底有什么区别. 我还是喜欢基于Schema风格的Spring事务管理,但也有很多人在用基于@Tras ...
- linux系统修改系统时间与时区
有装过Linux系统的人,可能都会有这样的经历,就是该机器安装windows系统时,时间正确,但是安装了linux系统后,尽管时区选择正确,也会发现系统时间不对.这是由于安装系统时采用了UTC,那么什 ...
- 2019年华南理工大学程序设计竞赛(春季赛)-H-Parco_Love_GCD
题目链接:https://ac.nowcoder.com/acm/contest/625/H 题意:给定n个数(<=1e9)的序列,其中n<=5e5,求该序列所有子序列的对应的gcd对1e ...
- MongoDB之增删改查
MongoDB的默认端口为:27017 show dbs 查看所有的数据库 MySQL和MongoDB的对应关系 MySQL MongoDB DB DB 数据库 table Collection ...