vue 对象继承_Vue2.0中组件的继承与扩展是什么

Vue2.0中组件的继承与扩展是什么

发布时间:2020-12-07 14:04:09

来源:亿速云

阅读:100

作者:小新

小编给大家分享一下Vue2.0中组件的继承与扩展是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

一、slot

1.默认插槽和匿名插槽

slot用来获取组件中的原内容,此方式用于父组件向子组件传递“标签数据”。有的时候为插槽提供默认的内容是很有用的,例如,一个 组件可能希望这个按钮的默认内容是“如果没有原内容,则显示该内容”,但是同时允许用户覆写为别的内容。

180812

welcome to xiamen

如果没有原内容,则显示该内容// 默认插槽

var vm=new Vue({

el:'#itany',

components:{

'my-hello':{

template:'#hello'

}

}

});

2.具名插槽

有些时候我们需要多个插槽, 元素有一个特殊的特性:name。这个特性可以用来定义额外的插槽:

  • aaa
  • bbb
  • ccc
  1. 111
  2. 222
  3. 333

welcome to xiamen

var vm=new Vue({

el:'#itany',

components:{

'my-hello':{

template:'#hello'

}

}

});

二、mixins

1.mixins简介

混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。mixins 选项接受一个混合对象的数组。

2.mixins用途

一般有两种用途:

1、在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染。

2、很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重用。

例如下面的例子:实现每次数据变化时都能够在控制台打印出提示:"数据发生变化"

Mixins


num:{{ num }}

增加数量

var addLog = { //额外临时加入时,用于显示日志

updated: function () {

console.log("数据发生变化,变化成" + this.num + ".");

}

}

Vue.mixin({// 全局注册一个混入,影响注册之后所有创建的每个 Vue 实例

updated: function () {

console.log("我是全局的混入")

}

})

var app = new Vue({

el: '#app',

data: {

num: 1

},

methods: {

add: function () {

this.num++;

}

},

updated() {

console.log("我是原生的update")

},

mixins: [addLog]//混入

})

3.mixins的调用顺序

上例说明了:从执行的先后顺序来说,混入对象的钩子将在组件自身钩子之前调用,如果遇到全局混入(Vue.mixin),全局混入的执行顺序要前于混入和组件里的方法。

三、extends

1.extends用法

extends选项允许声明扩展另一个组件,而无需使用 Vue.extend。

通过外部增加对象的形式,对构造器进行扩展。它和混入mixins非常的类似。只不过接收的参数是简单的选项对象或构造函数,所以extends只能单次扩展一个组件。

Extends


num:{{ num }}

add

var bbb = {

updated() {

console.log("我是被扩展出来的");

},

methods: {

add: function () { //跟原生的方法冲突,取原生的方法,这点跟混入一样

console.log('我是被扩展出来的add方法!');

this.num++;

}

}

};

var app = new Vue({

el: '#app',

data: {

num: 1

},

methods: {

add: function () {

console.log('我是原生add方法');

this.num++;

}

},

updated() {

console.log("我是扩展出来的");

},

extends: bbb// 接收对象和函数

})

从上面的例子也可看出,执行的先后顺序和mixins一样,另外扩展的方法与原生的冲突时,扩展的方法不生效,这点跟混入一样。

2.extends和mixins优先级比较var extend={

data:{extendData:'我是extend的data'},

created:function(){

console.log('这是extend的created');

}

}

var mixin={

data:{mixinData:'我是mixin的data'},

created:function(){

console.log('这是mixin的created');

}

}

var vm=new Vue({

el:'#app',

data:{mixinData:'我是vue实例的data'},

created:function(){

console.log('这是vue实例的created');

},

methods:{

getSum:function(){

console.log('这是vue实例里面getSum的方法');

}

},

mixins:[mixin],

extends:extend

})

由此可以得出,相对于mixins,extends触发的优先级更高

四、extend

Vue.extend只是创建一个构造器,它是为了创建可复用的组件。其主要用来服务于Vue.component,用来生成组件

/**

* 方式1:先创建组件构造器,然后由组件构造器创建组件

*/

//1.使用Vue.extend()创建一个组件构造器

var MyComponent = Vue.extend({

template: '

Hello World

'

});

//2.使用Vue.component(标签名,组件构造器),根据组件构造器来创建组件

Vue.component('hello', MyComponent);

/**

* 方式2:直接创建组件(推荐)

*/

// Vue.component('world',{

Vue.component('my-world', {

template: '

你好,世界

'

});

var vm = new Vue({ //这里的vm也是一个组件,称为根组件Root

el: '#itany',

data: {}

});

以上是“Vue2.0中组件的继承与扩展是什么”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/541617.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

stack示例_C.示例中的Stack.Clone()方法

stack示例C#Stack.Clone()方法 (C# Stack.Clone() method) Stack.Clone() method is used to create a shallow copy of the stack. Stack.Clone()方法用于创建堆栈的浅表副本。 Syntax: 句法: Object Stack.Clone();Parameters: None 参数&#xff1a…

简述计算机图形的图形应用主要有哪些,5计算机图形学考试简答题复习.doc

5计算机图形学考试简答题复习计算机图形学考试简答题复习1、简述计算机动画的概念,它经历了哪几个阶段的发展?(2分)计算机动画是指采用图形与图像的处理技术,借助于编程或动画制作软件生成一系列的景物画面,其中当前帧是前一帧的部…

在图片中选定任意凸多边形制作掩膜程序MATLAB

function S get_convex_S(C,vx,vy) %该函数实现的功能为指定图像中多边形的顶点,返回属于该凸多边形中的所有像素点 %xv,yv为顶点坐标按照顺时针或者逆时针。vx(1) xv(end); yv(1) yv(end) %输入的C是结构,vx vy是数组存的是顶点坐标。 %输…

js console 输出到文件_Node.js核心入门

正文核心模块是Node.js的心脏,主要是有一些精简高效的库组成(这方面和Python有很大的相似之处),为Node.js提供了基础的API。主要内容包括:Node.js核心入门(一)全局对象常用工具事件机制Node.js核心入门(二)文件系统访问HTTP服务器与客户端全局…

scala 当前日期_如何在Scala中检查当前日期和时间?

scala 当前日期Scala is a general-purpose programming language, which is majorly used for data manipulation. It has libraries and support for almost all different utilities that are important. One of the important things that are required while programming …

计算机科学考试大纲,计算机科学与技术考试大纲.doc

计算机科学与技术考试大纲计算机科学与技术专业本专业的专业课程考试为“计算机软件基础”和“计算机硬件基础”两门课程的组合试卷,卷面总分200分,时间150分钟,考试方式为笔试。考试可携带计数器,但禁止携带文曲星、商务通等带有…

eclipse中项目内存溢出问题

2019独角兽企业重金招聘Python工程师标准>>> SpringBoot项目热启动Perm区内存溢出。 Failed to instantiate [org.springframework.orm.jpa.JpaVendorAdapter]: Factory method jpaVendorAdapter threw exception; nested exception is java.lang.OutOfMemoryErro…

云盾idaas登陆_移动端扫码登录IDaaS平台

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":10,"count":10}]},"card":[{"des":"刷脸门禁通行系统前端接入人脸AI赋能的人脸…

express rest_Express / Node中用于REST API的邮递员工具

express restWhen dealing with routes (like in express), we may use any of the REST verbs and at times, the browser is limited to facilitate testing the routes/REST API. 在处理路由时(如快速表达),我们可以使用任何REST动词,有时浏览器会受到…

我们在使用计算机时,不能做什么?,11秋季学期计算机应用技术基础学习周期_01任务-在线作业[1]1...

1.选购显示器应优先考虑显示器的( B )性能指标选A.显示器的防辐射指标B. 显示器的带宽C. 显示器的刷新率D. 显示器的尺寸2. 一个声音文件采用双声道8位采样精度、22K采样频率录音,它的大小是5M,如果采用单声道16位采样精度、44K采样频率录音,…

按一个按钮会随机死人_《饥荒》那些年坑爹的随机地图,最后一个简直笑死人...

饥荒是一款随机性很强的游戏,这也是饥荒这款游戏相当耐玩的主要原因。别的不说小编敢保证随机开图的话你绝对找不到两张一模一样的地图。地图上的资源也会大不相同。不管是稀有的各种奇遇还是基础资源的刷新数量都是完全不同的。当然对于一些基础资源玩家们并没有多…

介词at_介词逻辑| 离散数学

介词at介词或陈述 (Preposition or Statement) A preposition is a definition sentence which is true or false but not both. 介词是一个定义语句,它是对还是错,但不能同时包含两者。 For example: The following 8 sentences, 例如:以下…

职称计算机提前考试试卷,职称计算机考试多项选择考试卷模拟考^试题

《职称计算机考试多项选择考试卷模拟考^试题》由会员分享,可在线阅读,更多相关《职称计算机考试多项选择考试卷模拟考^试题(8页珍藏版)》请在人人文库网上搜索。1、姓名:________________ 班级:________________ 学号:…

形象易懂讲解算法I——小波变换

https://zhuanlan.zhihu.com/p/22450818?referdong5 最早发于回答:能不能通俗的讲解下傅立叶分析和小波分析之间的关系? - 咚懂咚懂咚的回答现收入专栏。从傅里叶变换到小波变换,并不是一个完全抽象的东西,可以讲得很形象。小波变…

r语言安装ipsolve_R语言矩阵操作之矩阵运算

1.转置运算对于矩阵A,函数t(A)表示矩阵A的转置,如:> Amatrix(1:6,nrow2);> A;[,1] [,2] [,3][1,] 1 3 5[2,] 2 4 6> t(A);[,1] [,2][1,] 1 2[2,] 3 4[3,] 5 62.求方阵的行列式函数det()是求矩阵…

使用Linux命令行归档文件

存档文件 (Archiving Files) As we already understand what Compression (Compression techniques in Linux) is? We shall learn about Archives. We prefer compression as it is convenient to send file compressed through a network but sometimes it is not a smart w…

http缓存机制之304状态码

在网上看到一篇关于解释浏览器缓存更新机制304状态码的文章,里面说如果请求头中的If-Modified-Since字段和If-None-Match字段的值分别和响应头中的Last-Modified字段和Etag字段值一致,服务器就会返回304状态码(无响应体),浏览器就从本地读取缓…

东北大学 计算机技术导师,报考东北大学 计算机技术 329分 求调剂相关专业

自荐类型:硕士自荐报考院校:东北大学报考专业:(专业硕士)计算机技术[085211]本科院校:沈阳工程学院本科专业:计算机科学与技术初试成绩:总分:329政治:69 英语:71 …

c语言i++和++i程序_使用C ++程序修改链接列表的内容

c语言i和i程序Problem statement: 问题陈述: Given a linked list, you modified that linked list in such a way that the elements of the first half of that linked list are the difference of the first node to the last node and next node is the differ…

原生js设置div隐藏或者显示_10种JS控制DIV的显示隐藏代码

div隐藏与显示#menus {background-color: #c4cff0;}function Layer_HideOrShow(cur_div){ var currentdocument.getElementById(cur_div);if(current.style.visibility"hidden"){current.style.visibility "visible";}else{current.style.visibility "…