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

前言

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

一、slot

1.默认插槽和匿名插槽

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

  <div id="itany"> 180812</div> <div> <h3>welcome to xiamen</h3>如果没有原内容，则显示该内容// 默认插槽 </div>

2.具名插槽

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

 <div id="itany">  <ul> <li>aaa</li><li>bbb</li><li>ccc</li></ul><ol> <li>111</li><li>222</li><li>333</li></ol></div> <div> <h3>welcome to xiamen</h3></div>

二、mixins

1.mixins简介

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

2.mixins用途

一般有两种用途：

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

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

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

 <h1>Mixins</h1><hr><div id="app"> <p>num:{{ num }}</p><p> <button>增加数量 </P></div>

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

参考文章

Vue官方文档

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。