vue.extend与vue.component的区别和联系
一味的闷头开发,却对基础概念缺乏理解,是个大坑... 查阅官网后现对自己的理解记录一下,用于日后复习巩固
Vue.extend({}) 简述:使用vue.extend返回一个子类构造函数,也就是预设部分选项的vue实例构造器。
后可使用vue.component进行实例化、或使用new extendName().$mount(''+el)方式进行实例化(从而实现模拟组件)。
let Footer = Vuew.extend({
data(){
return {
footerName:'I CAN DO IT...'
}
},
template:'<div>{{footerName}}</div>'
});
Vue.component({})简述:不多介绍了。。。用于生成全局组件
使用:
1,Vue.component使用Vue.extend生成的构造函数:
Vue.component('footer-view',Footer);
2,实例化构造函数从而模拟组件:
new Footer({
data:{
'...':''
}
}).$mount('my-footer')
完整代码:
<template>
<my-footer></my-footer>
</template>
<script>
let Footer = Vuew.extend({
data(){
return {
footerName:'I CAN DO IT...'
}
},
template:'<div>{{footerName}}</div>'
});
Vue.component('footer-view',Footer);
// new Footer({
// data:{
// '...':''
// }
// }).$mount('my-footer')
</script>
若有什么错误,欢迎指正。。。
vue.extend与vue.component的区别和联系的更多相关文章
- 前端框架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 vue.extend 和vue.component 两则之间的区别
Vue.extend 返回的是一个 扩展实例构造器, 也就是一个预设了部分选项的Vue实例构造器 Var myExtend = Vue.extend({ //预设选项 })//返回一个 扩展实例构造器 ...
- vue.extend和vue.component的区别
vue.extend 使用基础 Vue 构造器函数,通过原型继承,(返回)创建一个"子类"(构造器).参数是一个包含组件选项的对象. const Sub = function Vu ...
- Vue官方文档Vue.extend、Vue.component、createElement、$attrs/$listeners、插槽的深入理解
一.Vue.extend({}). 看官网文档介绍,Vue.extend({})返回一个Vue的子类,那么这个Vue子类是啥玩意儿呢?我直观感觉它就是创建出一个组件而已啊,那么它又和Vue.compo ...
- Vue.extend和Vue.component的联系与差异
extend 是构造一个组件的语法器. 你给它参数 他给你一个组件 然后这个组件 你可以作用到Vue.component 这个全局注册方法里, 也可以在任意vue模板里使用apple组件 var ap ...
- Vue.mixin Vue.extend(Vue.component)的原理与区别
1.本文将讲述 方法 Vue.extend Vue.mixin 与 new Vue({mixins:[], extend:{}})的区别与原理 先回顾一下 Vue.mixin 官网如下描述: Vue. ...
- vue extend 的基本使用
vue.extend 局部注册 的应用2 请注意,extend创建的是一个组件构造器,而不是一个具体的组件实例.所以他不能直接在new Vue中这样使用: new Vue({components: f ...
- Vue.extend动态注册子组件
写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,使用起来也蛮不错的. is 预期:string | Object (组件的选项对象) ...
- 【js】vue 2.5.1 源码学习 (三) Vue.extend 和 data的合并策略
大体思路 (三) 1. 子类父类 2.Vue.extend() //创建vue的子类 组件的语法器 Vue.extend(options) Profile().$mount('#app' ...
随机推荐
- controller运行springboot项目
搭建完springboot项目后,新建HelloController.java文件,编写main方法,启动HelloController.java,具体代码如图: 在浏览器访问127.0.0.1:80 ...
- 关于hive Metadata 使用 MsSQL
下面的页面里说明, http://docs.hortonworks.com/HDPDocuments/HDP2/HDP-2.0.6.0-Win/bk_installing_hdp_for_window ...
- K3 Wise 常用表【转载】
在后台数据库ICClassType表中,字段FID<0的是老单,FID>0的是新单.--事务类型select * from ICClassType where FT ...
- 黑马学习CSS之CSS模块化规范全部组成 CSS属性列表
- Linux磁盘占满 no space left on device
假如当前文件删除了,如果还有其他进程还在使用这个文件,这个文件删不干净:https://www.cnblogs.com/heyonggang/p/3644736.html 在Linux下查看磁盘空间使 ...
- COCO2018 全景分割
全景分割是18年新推出的一个任务,它要求同时分割出目标和背景,也就是既有实例分割也有语义分割,用官方的话讲是朝着真实世界视觉系统的重要一步 如图所示,里面既有对天空,草地等stuff的分割,也有对目标 ...
- 设置select不可修改
<s:select id="notSelectChange" list="#{'1':'表示每月几号','2':'表示每季度第几天','3':'表示每年第几月'}& ...
- Luogu P1108 低价购买 DP
第一问求最长下降子序列,不提: 第二问:借鉴了最短路的方法??? 我们求出来了每个位置的最长下降子序列的长度,那么刻意这样这样转移 if f[i]==f[j]+1&&a[i]<a ...
- SPOJ - LOCKER 数论 贪心
题意:求出\(n\)拆分成若干个数使其连乘最大的值 本题是之江学院网络赛的原题,计算规模大一点,看到EMAXX推荐就做了 忘了大一那会是怎么用均值不等式推出结果的(还给老师系列) 结论倒还记得:贪心分 ...
- HDU - 2842
要拆第n个环要求保留第n-1拆除前n-2 对于n,先拆掉n-2再去掉n再放回n-2,然后规模降为n-1 f(n)=2f(n-2)+f(n-1)+1 inline ll mod(ll a){return ...