Vue.extend構(gòu)造器的詳解

發(fā)布時(shí)間：2020-10-06 16:07:01 來(lái)源：腳本之家閱讀：103 作者：Dear_Mr 欄目：web開(kāi)發(fā)

Vue.extend構(gòu)造器的詳解

1.簡(jiǎn)單介紹

Vue.extend(options)

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

用法：使用Vue構(gòu)造器，創(chuàng)建一個(gè)“子類(lèi)”，參數(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用來(lái)生成組件，可以簡(jiǎn)單理解為當(dāng)在模板中遇到該組件作為標(biāo)簽的自定義元素時(shí)，會(huì)自動(dòng)調(diào)用“擴(kuò)展實(shí)例構(gòu)造器”來(lái)生產(chǎn)組件實(shí)例，并掛在到自定義元素上

2.簡(jiǎn)單舉例

自定義無(wú)參數(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'
  }
 }
});

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

<author></author>

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

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

使用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');

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

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

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

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

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

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

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

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

以上就是對(duì)Vue.extend構(gòu)造器的實(shí)例詳解，本站還有很多關(guān)于vue js開(kāi)發(fā)的資料，歡迎大家搜索參閱，如有疑問(wèn)請(qǐng)大家留言，共同進(jìn)步，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

向AI問(wèn)一下細(xì)節(jié)

Vue.extend構(gòu)造器的詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽