Vue2.0中組件的繼承與擴展是什么

發布時間：2020-12-07 14:04:09

來源：億速云

閱讀：100

作者：小新

小編給大家分享一下Vue2.0中組件的繼承與擴展是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一、slot

1.默認插槽和匿名插槽

slot用來獲取組件中的原內容，此方式用于父組件向子組件傳遞“標簽數據”。有的時候為插槽提供默認的內容是很有用的,例如，一個 組件可能希望這個按鈕的默認內容是“如果沒有原內容，則顯示該內容”，但是同時允許用戶覆寫為別的內容。

var vm=new Vue({

el:'#itany',

components:{

'my-hello':{

template:'#hello'

}

}

});

2.具名插槽

有些時候我們需要多個插槽, 元素有一個特殊的特性：name。這個特性可以用來定義額外的插槽：

var vm=new Vue({

el:'#itany',

components:{

'my-hello':{

template:'#hello'

}

}

});

二、mixins

1.mixins簡介

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

2.mixins用途

一般有兩種用途：

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

2、很多地方都會用到的公用方法，用混入的方法可以減少代碼量，實現代碼重用。

例如下面的例子：實現每次數據變化時都能夠在控制臺打印出提示："數據發生變化"

Mixins

---

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

---

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中組件的繼承與擴展是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！