溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Vue.extend構造器的詳解
1.簡單介紹
Vue.extend(options)
參數：對象
用法：使用Vue構造器，創建一個“子類”，參數是一個包含組件選項的對象，其中,data選項中必須是函數
描述：Vue.extend返回的是一個“擴展實例構造器”，也就是預設了部分選項的Vue的實例構造器，它常常服務于Vue.component用來生成組件，可以簡單理解為當在模板中遇到該組件作為標簽的自定義元素時，會自動調用“擴展實例構造器”來生產組件實例，并掛在到自定義元素上
2.簡單舉例
自定義無參數標簽
下面的代碼中的author就是返回的“擴展實例構造器”
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'
}
}
});
對應的html如下：
<author></author>
此時的頁面必然是沒有任何效果的，因為擴展實例構造器還需要掛載，如下
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傳遞參數
掛載在普通標簽上
返回的擴展實例構造器的方式和上面還是一樣的，只是html里不再是自定義標簽，而是一個普通標簽，比如div
<div id="author"></div>
new author().$mount('author');
其實對于同一個擴展構造器而言，它的每一個實例其實是可以掛載到不同的標簽上的，比如我可以這樣
new author().$mount('#author');
new author().$mount('author');
這兩個標簽的內容會一同顯示，結果一樣
以上就是對Vue.extend構造器的實例詳解，本站還有很多關于vue js開發的資料，歡迎大家搜索參閱，如有疑問請大家留言，共同進步，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
