詳解Vue2.0組件的繼承與擴(kuò)展

更新時間：2018年11月23日 10:22:43 作者：浪里行舟

這篇文章主要介紹了詳解Vue2.0組件的繼承與擴(kuò)展，主要分享slot、mixins/extends和extend的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前言

本文將介紹vue2.0中的組件的繼承與擴(kuò)展，主要分享slot、mixins/extends和extend的用法。

一、slot

1.默認(rèn)插槽和匿名插槽

slot用來獲取組件中的原內(nèi)容，此方式用于父組件向子組件傳遞“標(biāo)簽數(shù)據(jù)”。有的時候?yàn)椴宀厶峁┠J(rèn)的內(nèi)容是很有用的,例如，一個<my-hello> 組件可能希望這個按鈕的默認(rèn)內(nèi)容是“如果沒有原內(nèi)容，則顯示該內(nèi)容”，但是同時允許用戶覆寫為別的內(nèi)容。

<body>
 <div id="itany">
 <my-hello>180812</my-hello>
 </div>
<template id="hello">
 <div>
 <h3>welcome to xiamen</h3>
 <slot>如果沒有原內(nèi)容，則顯示該內(nèi)容</slot>// 默認(rèn)插槽
 </div>
</template>
<script>
 var vm=new Vue({
  el:'#itany',
  components:{
  'my-hello':{
  template:'#hello'
 }
  }
 }); 
</script>

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>

二、mixins

1.mixins簡介

混入 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式?；烊雽ο罂梢园我饨M件選項(xiàng)。當(dāng)組件使用混入對象時，所有混入對象的選項(xiàng)將被混入該組件本身的選項(xiàng)。mixins 選項(xiàng)接受一個混合對象的數(shù)組。

2.mixins用途

一般有兩種用途：

1、在你已經(jīng)寫好了構(gòu)造器后，需要增加方法或者臨時的活動時使用的方法，這時用混入會減少源代碼的污染。

2、很多地方都會用到的公用方法，用混入的方法可以減少代碼量，實(shí)現(xiàn)代碼重用。

例如下面的例子：實(shí)現(xiàn)每次數(shù)據(jù)變化時都能夠在控制臺打印出提示："數(shù)據(jù)發(fā)生變化"

<h1>Mixins</h1>
 <hr>
 <div id="app">
  <p>num:{{ num }}</p>
  <P>
   <button @click="add">增加數(shù)量<tton>
  </P>
 </div>
 <script type="text/javascript">
  var addLog = { //額外臨時加入時，用于顯示日志
   updated: function () {
    console.log("數(shù)據(jù)發(fā)生變化,變化成" + this.num + ".");
   }
  }
  Vue.mixin({// 全局注冊一個混入，影響注冊之后所有創(chuàng)建的每個 Vue 實(shí)例
   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的調(diào)用順序

上例說明了：從執(zhí)行的先后順序來說，混入對象的鉤子將在組件自身鉤子之前調(diào)用，如果遇到全局混入(Vue.mixin)，全局混入的執(zhí)行順序要前于混入和組件里的方法。

三、extends

1.extends用法

extends選項(xiàng)允許聲明擴(kuò)展另一個組件，而無需使用 Vue.extend。
通過外部增加對象的形式，對構(gòu)造器進(jìn)行擴(kuò)展。它和混入mixins非常的類似。只不過接收的參數(shù)是簡單的選項(xiàng)對象或構(gòu)造函數(shù),所以extends只能單次擴(kuò)展一個組件。

 <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("我是被擴(kuò)展出來的");
   },
   methods: {
    add: function () { //跟原生的方法沖突，取原生的方法，這點(diǎn)跟混入一樣
     console.log('我是被擴(kuò)展出來的add方法！');
     this.num++;
    }
   }
  };
  var app = new Vue({
   el: '#app',
   data: {
    num: 1
   },
   methods: {
    add: function () {
     console.log('我是原生add方法');
     this.num++;
    }
   },
   updated() {
    console.log("我是擴(kuò)展出來的");
   },
   extends: bbb// 接收對象和函數(shù)
  })

從上面的例子也可看出，執(zhí)行的先后順序和mixins一樣，另外擴(kuò)展的方法與原生的沖突時，擴(kuò)展的方法不生效，這點(diǎn)跟混入一樣。

2.extends和mixins優(yōu)先級比較

 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實(shí)例的data'},
 created:function(){
  console.log('這是vue實(shí)例的created');
 },
 methods:{
  getSum:function(){
  console.log('這是vue實(shí)例里面getSum的方法');
  }
 },
 mixins:[mixin],
 extends:extend
 })

由此可以得出，相對于mixins,extends觸發(fā)的優(yōu)先級更高

四、extend

Vue.extend只是創(chuàng)建一個構(gòu)造器,它是為了創(chuàng)建可復(fù)用的組件。其主要用來服務(wù)于Vue.component，用來生成組件

  <div id="itany">
  <hello></hello>
  <my-world></my-world>
 </div>
 <script>
  /**
   * 方式1：先創(chuàng)建組件構(gòu)造器，然后由組件構(gòu)造器創(chuàng)建組件
   */
  //1.使用Vue.extend()創(chuàng)建一個組件構(gòu)造器
  var MyComponent = Vue.extend({
   template: '<h3>Hello World</h3>'
  });
  //2.使用Vue.component(標(biāo)簽名,組件構(gòu)造器)，根據(jù)組件構(gòu)造器來創(chuàng)建組件
  Vue.component('hello', MyComponent);
  /**
   * 方式2：直接創(chuàng)建組件(推薦)
   */
  // Vue.component('world',{
  Vue.component('my-world', {
   template: '<h1>你好，世界</h1>'
  });
  var vm = new Vue({ //這里的vm也是一個組件，稱為根組件Root
   el: '#itany',
   data: {}
  }); 
 </script>

如果有需要源代碼，請猛戳源代碼

參考文章

Vue官方文檔

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: