Vue extend的基本用法(實例詳解)

更新時間：2019年12月09日 13:00:16 作者：liuhua_2323

這篇文章主要介紹了Vue extend的基本用法,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下

Vue.extend 屬于 Vue 的全局 API，在實際業(yè)務(wù)開發(fā)中我們很少使用，因為相比常用的 Vue.component 寫法使用 extend 步驟要更加繁瑣一些。

我們創(chuàng)建Vue實例時，都會有一個el選項，來指定實例的根節(jié)點，如果不寫el選項，那組件就處于未掛載狀態(tài)。Vue.extend 的作用，就是基于 Vue 構(gòu)造器，創(chuàng)建一個‘ 子類 '，它的參數(shù)跟new Vue的基本一樣，但data要跟組件一樣，是個函數(shù)，再配合$mount，就可以渲染組件，并且掛載到任意指定的節(jié)點上，比如body（這是單文件組件做不到的）

下面我們就來看兩個例子：

1.在單文件組件中使用

<template>
 <div id="about"></div>
</template>
<script>
import Vue from 'vue/dist/vue.js'
var Profile = Vue.extend({
 template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
 data: function () {
  return {
   firstName: 'Walter',
   lastName: 'White',
   alias: 'Heisenberg'
  }
 }
})
// 創(chuàng)建 Profile 實例，并掛載到一個元素上。
let profile=new Profile().$mount();
 
export default {
 mounted(){
  let divid=document.getElementById('about');
  divid.appendChild(profile.$el)
 }
}
</script>

這里需要注意幾個點：

報錯信息

如果有小伙伴遇到了這個問題，那么你導(dǎo)入的是

import Vue from 'vue'

這個時候只需要修改成即可解決問題

import Vue from 'vue/dist/vue.js'

在單文件組件中的掛載問題：

因為這里是通過獲取節(jié)點的方式添加到某個元素內(nèi)，所以一定要在鉤子函數(shù)中掛載，確保當(dāng)前頁面的dom節(jié)點加載完成。

mounted(){
  let divid=document.getElementById('about');
  divid.appendChild(profile.$el)
 }

2.單獨構(gòu)建js文件

//index.js
 
import Vue from 'vue/dist/vue.js'
 
export default function Create(node){
  var notiful=Vue.extend({
    template:`<p>{{name}}</p>`,
    data(){
      return {
        name:"liuhuas"
      }
    }
  })
  
  var noti=new notiful().$mount();
  document.getElementById(node).appendChild(noti.$el);
}

創(chuàng)建完成后我們就可以在任何地方引入這個js文件，并執(zhí)行Create方法，注意的是這里的Create方法里面也獲取了dom，那么就需要在相應(yīng)的鉤子函數(shù)中去執(zhí)行這個方法。

總結(jié)

以上所述是小編給大家介紹的Vue extend的基本用法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: