本文實例講述了Vue.extend實現掛載到實例上的方法。分享給大家供大家參考，具體如下：

這里主要是做個筆記

根據官網的說法，Vue.extend：是使用基礎 Vue 構造器，創建一個“子類”。參數是一個包含組件選項的對象。

官網的用法是：

<div id="mount-point"></div>

// 創建構造器var Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function () {  return {   firstName: 'Walter',   lastName: 'White',   alias: 'Heisenberg'  } }})// 創建 Profile 實例，并掛載到一個元素上。new Profile().$mount('#mount-point')

最終結果如下：

<p>Walter White aka Heisenberg</p>

感覺這樣寫不太美觀

于是改為下面這樣寫：

在文件夾./src/component/expend，新建兩個文件：main.js和main.vue

main.vue就是你的組件，愛怎么寫怎么寫

main.js是把組件掛載到實例上，代碼如下：

import Vue from 'Vue'import Main from './main.vue'let Builder = Vue.extend(Main)export default {  install (vue) {    vue.prototype.$YOURNAME = this.getComponent  },  getComponent (param) {    let instance = new Builder({      propsData: { param }    })    instance.vm = instance.$mount()    document.body.appendChild(instance.vm.$el)    return instance  }}

在入口文件main.js，添加代碼：

import Vue from 'Vue'import myComponent from './src/component/expend/main.js'Vue.use(myComponent)

然后在頁面中就可以這樣使用了:

this.$YOURNAME(param)

希望本文所述對大家vue.js程序設計有所幫助。