Vue.extend實現掛載到實例

本篇文章給大家分享的是有關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.extend實現掛載到實例，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。