1.簡單介紹

Vue.extend(options)

參數(shù)：對(duì)象

用法：使用Vue構(gòu)造器，創(chuàng)建一個(gè)“子類”，參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象，其中,data選項(xiàng)中必須是函數(shù)

描述：Vue.extend返回的是一個(gè)“擴(kuò)展實(shí)例構(gòu)造器”，也就是預(yù)設(shè)了部分選項(xiàng)的Vue的實(shí)例構(gòu)造器，它常常服務(wù)于Vue.component用來生成組件，可以簡單理解為當(dāng)在模板中遇到該組件作為標(biāo)簽的自定義元素時(shí)，會(huì)自動(dòng)調(diào)用“擴(kuò)展實(shí)例構(gòu)造器”來生產(chǎn)組件實(shí)例，并掛在到自定義元素上

2.簡單舉例

自定義無參數(shù)標(biāo)簽

下面的代碼中的author就是返回的“擴(kuò)展實(shí)例構(gòu)造器”

var author = Vue.extend({template: "<p><a :href='url'>{{author}}</a></p>",data : function() {return {author : 'vamous',url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'}} });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

對(duì)應(yīng)的html如下：

<author></author>

• 1

此時(shí)的頁面必然是沒有任何效果的，因?yàn)閿U(kuò)展實(shí)例構(gòu)造器還需要掛載，如下

new author().$mount('author');

• 1

使用propsData

var author = Vue.extend({template: "<p><a :href='url'>{{author}} & {{name}}</a></p>",data : function() {return {author : 'vamous',url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'}},props : ['name'] });new author({propsData: {name : 'dear_mr'}}).$mount('#author');

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

可以利用propsData傳遞參數(shù)

---

掛載在普通標(biāo)簽上

返回的擴(kuò)展實(shí)例構(gòu)造器的方式和上面還是一樣的，只是html里不再是自定義標(biāo)簽，而是一個(gè)普通標(biāo)簽，比如div

<div id="author"></div>

• 1

new author().$mount('author');

• 1

其實(shí)對(duì)于同一個(gè)擴(kuò)展構(gòu)造器而言，它的每一個(gè)實(shí)例其實(shí)是可以掛載到不同的標(biāo)簽上的，比如我可以這樣

new author().$mount('#author'); new author().$mount('author');

• 1
• 2

這兩個(gè)標(biāo)簽的內(nèi)容會(huì)一同顯示，結(jié)果一樣

總結(jié)

以上是生活随笔為你收集整理的V记录2(文档)Vue.extend构造器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。