Vue.extend實現(xiàn)掛載到實例上的方法

更新時間：2019年05月01日 11:41:00 作者：__Charming__

這篇文章主要介紹了Vue.extend實現(xiàn)掛載到實例上的方法,結(jié)合實例形式分析了Vue.extend實現(xiàn)掛載到實例上的具體操作步驟與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下

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

這里主要是做個筆記

根據(jù)官網(wǎng)的說法，Vue.extend：是使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個“子類”。參數(shù)是一個包含組件選項的對象。

官網(wǎng)的用法是：

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

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

最終結(jié)果如下：

<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程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

在vue中封裝可復(fù)用的組件方法
下面小編就為大家分享一篇在vue中封裝可復(fù)用的組件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue路由結(jié)構(gòu)可設(shè)一層方便動態(tài)添加路由操作
這篇文章主要介紹了vue路由結(jié)構(gòu)可設(shè)一層方便動態(tài)添加路由操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue?如何配置eslint代碼檢查
這篇文章主要介紹了vue?如何配置eslint代碼檢查，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue2.x中的Render函數(shù)詳解
通常開發(fā)vue我們使用的是模板語法，其實還有和react相同的語法，那就是render函數(shù)，同樣支持jsx語法。Vue 的模板實際是編譯成了 render 函數(shù)。
2017-05-05
解決vue使用vant下拉框van-dropdown-item 綁定title值不變問題
這篇文章主要介紹了解決vue使用vant下拉框van-dropdown-item 綁定title值不變問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實現(xiàn)
本文主要介紹了VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05
Vue和uniapp中該如何使用canvas詳解
說起canvas是css3新增的標(biāo)簽,而餅狀圖又是canvas經(jīng)典,我們公司現(xiàn)在正在用uni-app框架去研發(fā)APP,下面這篇文章主要給大家介紹了關(guān)于Vue和uniapp中該如何使用canvas的相關(guān)資料,需要的朋友可以參考下
2022-10-10
vue對插件(iview,elementui,treeselect)樣式的局部修改方式
這篇文章主要介紹了vue對插件(iview,elementui,treeselect)樣式的局部修改方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue2.x 從vue.config.js配置到項目優(yōu)化
這篇文章主要介紹了vue2.x 從vue.config.js配置到項目優(yōu)化，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
vue3數(shù)組或?qū)ο筚x值不更新解決方法示例
這篇文章主要為大家介紹了vue3數(shù)組或?qū)ο筚x值不更新解決方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-11-11