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

前言

創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括杜集網(wǎng)站建設(shè)、杜集網(wǎng)站制作、杜集網(wǎng)頁制作以及杜集網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，杜集網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到杜集省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

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

一、slot

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

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

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

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

2.具名插槽

有些時(shí)候我們需要多個(gè)插槽,<slot> 元素有一個(gè)特殊的特性：name。這個(gè)特性可以用來定義額外的插槽：

<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>
  <h4>welcome to xiamen</h4>
  <slot name="s1"></slot>
 </div>
</template>
<script>
 var vm=new Vue({
 el:'#itany',
 components:{
  'my-hello':{
   template:'#hello'
  }
 }
 }); 
</script>

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

二、mixins

1.mixins簡介

混入 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式。混入對象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對象時(shí)，所有混入對象的選項(xiàng)將被混入該組件本身的選項(xiàng)。mixins 選項(xiàng)接受一個(gè)混合對象的數(shù)組。

2.mixins用途

一般有兩種用途：

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

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

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

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

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

3.mixins的調(diào)用順序

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

三、extends

1.extends用法

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

 <h2>Extends</h2>
 <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ù)
  })

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

從上面的例子也可看出，執(zhí)行的先后順序和mixins一樣，另外擴(kuò)展的方法與原生的沖突時(shí)，擴(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
 })

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

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

四、extend

Vue.extend只是創(chuàng)建一個(gè)構(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è)組件構(gòu)造器
  var MyComponent = Vue.extend({
   template: '<h4>Hello World</h4>'
  });
  //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: '<h2>你好，世界</h2>'
  });
  var vm = new Vue({ //這里的vm也是一個(gè)組件，稱為根組件Root
   el: '#itany',
   data: {}
  }); 
 </script>

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

參考文章

Vue官方文檔

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前標(biāo)題：詳解Vue2.0組件的繼承與擴(kuò)展
文章分享：http://bm7419.com/article10/ijhigo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、企業(yè)建站、App設(shè)計(jì)、建站公司、搜索引擎優(yōu)化、Google

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容