快捷導(dǎo)航

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

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

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

Vue.extend 屬于 Vue 的全局 API，在實(shí)際業(yè)務(wù)開發(fā)中我們很少使用，因?yàn)橄啾瘸Ｓ玫?Vue.component 寫法使用 extend 步驟要更加繁瑣一些。

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

下面我們就來看兩個(gè)例子：

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 實(shí)例，并掛載到一個(gè)元素上。
let profile=new Profile().$mount();
 
export default {
 mounted(){
  let divid=document.getElementById('about');
  divid.appendChild(profile.$el)
 }
}
</script>

這里需要注意幾個(gè)點(diǎn)：

報(bào)錯(cuò)信息

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

import Vue from 'vue'

這個(gè)時(shí)候只需要修改成即可解決問題

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

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

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

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

2.單獨(dú)構(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)建完成后我們就可以在任何地方引入這個(gè)js文件，并執(zhí)行Create方法，注意的是這里的Create方法里面也獲取了dom，那么就需要在相應(yīng)的鉤子函數(shù)中去執(zhí)行這個(gè)方法。

總結(jié)

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

您可能感興趣的文章: