快捷導(dǎo)航

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

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

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

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

這里主要是做個(gè)筆記

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

官網(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 實(shí)例，并掛載到一個(gè)元素上。
new Profile().$mount('#mount-point')

最終結(jié)果如下：

<p>Walter White aka Heisenberg</p>

感覺這樣寫不太美觀

于是改為下面這樣寫：

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

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

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

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)

然后在頁(yè)面中就可以這樣使用了:

this.$YOURNAME(param)

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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