详解Vue2.0组件的继承与扩展


Posted in Javascript onNovember 23, 2018

前言

本文将介绍vue2.0中的组件的继承与扩展,主要分享slot、mixins/extends和extend的用法。

一、slot

1.默认插槽和匿名插槽

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

<body>
 <div id="itany">
 <my-hello>180812</my-hello>
 </div>
<template id="hello">
 <div>
 <h3>welcome to xiamen</h3>
 <slot>如果没有原内容,则显示该内容</slot>// 默认插槽
 </div>
</template>
<script>
 var vm=new Vue({
  el:'#itany',
  components:{
  'my-hello':{
  template:'#hello'
 }
  }
 }); 
</script>

详解Vue2.0组件的继承与扩展

2.具名插槽

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

<div id="itany">
 <my-hello>
  <ul slot="s1">
 <li>aaa</li>
 <li>bbb</li>
 <li>ccc</li>
  </ul>
  <ol slot="s2">
 <li>111</li>
 <li>222</li>
 <li>333</li>
  </ol>
 </my-hello>
</div>
<template id="hello">
 <div>
  <slot name="s2"></slot>
  <h3>welcome to xiamen</h3>
  <slot name="s1"></slot>
 </div>
</template>
<script>
 var vm=new Vue({
 el:'#itany',
 components:{
  'my-hello':{
   template:'#hello'
  }
 }
 }); 
</script>

详解Vue2.0组件的继承与扩展

二、mixins

1.mixins简介

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

2.mixins用途

一般有两种用途:

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

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

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

<h1>Mixins</h1>
 <hr>
 <div id="app">
  <p>num:{{ num }}</p>
  <P>
   <button @click="add">增加数量<tton>
  </P>
 </div>
 <script type="text/javascript">
  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]//混入
  })

详解Vue2.0组件的继承与扩展

3.mixins的调用顺序

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

三、extends

1.extends用法

extends选项允许声明扩展另一个组件,而无需使用 Vue.extend
通过外部增加对象的形式,对构造器进行扩展。它和混入mixins非常的类似。只不过接收的参数是简单的选项对象或构造函数,所以extends只能单次扩展一个组件。

<h1>Extends</h1>
 <hr>
 <div id="app">
  num:{{ num }}
  <p>
   <button @click="add">add</button>
  </p>
 </div>
 <script type="text/javascript">
  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// 接收对象和函数
  })

详解Vue2.0组件的继承与扩展

从上面的例子也可看出,执行的先后顺序和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
 })

详解Vue2.0组件的继承与扩展

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

四、extend

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

<div id="itany">
  <hello></hello>
  <my-world></my-world>
 </div>
 <script>
  /**
   * 方式1:先创建组件构造器,然后由组件构造器创建组件
   */
  //1.使用Vue.extend()创建一个组件构造器
  var MyComponent = Vue.extend({
   template: '<h3>Hello World</h3>'
  });
  //2.使用Vue.component(标签名,组件构造器),根据组件构造器来创建组件
  Vue.component('hello', MyComponent);
  /**
   * 方式2:直接创建组件(推荐)
   */
  // Vue.component('world',{
  Vue.component('my-world', {
   template: '<h1>你好,世界</h1>'
  });
  var vm = new Vue({ //这里的vm也是一个组件,称为根组件Root
   el: '#itany',
   data: {}
  }); 
 </script>

如果有需要源代码,请猛戳源代码

参考文章

Vue官方文档

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
javascript几个易错点记录
Nov 26 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
angular4自定义表单控件[(ngModel)]的实现
Nov 23 #Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 #Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 #Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 #Javascript
vue全局使用axios的方法实例详解
Nov 22 #Javascript
vue中的ref和$refs的使用
Nov 22 #Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 #Javascript
You might like
在php中使用sockets:从新闻组中获取文章
2006/10/09 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
使用Python对Excel进行读写操作
2017/03/30 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
最新销售员个人自荐信
2013/09/21 职场文书
晚归检讨书
2014/02/19 职场文书
春节请假条
2014/04/11 职场文书
空乘英文求职信
2014/04/13 职场文书
车间核算员岗位职责
2014/07/01 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript