Vue.extend

1.傳遞的參數(shù)

Vue.extend({Object})，傳遞的是一個(gè)對(duì)象，這個(gè)對(duì)象包含template等，其實(shí)就是傳遞一個(gè)包含組件選項(xiàng)的對(duì)象。

他是屬于Vue的全局API，用來(lái)創(chuàng)建一個(gè)Vue的"子類"。

2.使用

2.1 直接用來(lái)掛載元素

Vue.extend({Object})放回的是一個(gè)構(gòu)造器，data要寫成組件的函數(shù)形式，因?yàn)閯?chuàng)建的是構(gòu)造器，并非實(shí)例，所以要使用這個(gè)組件就必須new出來(lái)，并通過(guò)KaTeX parse error: Expected 'EOF', got '#' at position 8: mount('#?mount-point')進(jìn)行…mount()等同于el屬性。

// 創(chuàng)建構(gòu)造器 var Profile = Vue.extend({template: '<p>{{firstName}} {{lastName}}</p>',data: function () {return {firstName: 'Wang',lastName: 'wu',}} }) // 創(chuàng)建 Profile 實(shí)例，并掛載到一個(gè)元素上。 new Profile().$mount('#mount-point')//結(jié)果： //<div id="mount-point"></div> //<p>Walter White aka Heisenberg</p>

2.2 或者用來(lái)創(chuàng)建組件

//創(chuàng)建Vue對(duì)象 var vue = new Vue({el:'mount-point' })// 創(chuàng)建構(gòu)造器 var Profile = Vue.extend({template: '<p>{{firstName}} {{lastName}}</p>',data: function () {return {firstName: 'Wang',lastName: 'wu',}} })//也可以這樣使用，通過(guò)傳入構(gòu)造器和指定組件名'my-component'，注冊(cè)一個(gè)全局組件 Vue.component('my-component', Profile)//結(jié)果：我就可以在vue實(shí)例掛載的元素中，使用我的組件了 //<div id="mount-point"><my-component></my-component></div>

總結(jié)

以上是生活随笔為你收集整理的Vue.extend的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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