[TOC] >[success] # Vue -- 手動掛載組件位置 [關于掛載的底層原理代碼的解析介紹](https://juejin.im/post/59da1c116fb9a00a4a4cf6dd) ~~~ 1.現在要解決的是如何讓我們的組件的可以定義其所在的渲染范圍，因為平常在我們寫單頁面的時候，我們經常 在入口文件會寫的以下代碼： import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' new Vue({ router, store, render: h => h(App) }).$mount('#app') 或者是： new Vue({ el:'#app', router, store, render: h => h(App) }) ~~~ ~~~ 1.可以發現我們的單頁面主體一般我們可以通過'el'的形式也好或者是'$mount'的形式也好我們將其限制在一個 范圍內，如果我們的另外的組件想脫離這個范圍或者是指定渲染范圍可以通過'extend' 和'$mount' ~~~ >[danger] ##### Vue.extend 創建一個未掛載的組件 [vue 文檔 對extend 詳細講解](https://cn.vuejs.org/v2/api/#ignoredElements) ~~~ 1.在之前的章節里有講 'Vue.extend' 創建組件的用法http://www.hmoore.net/cyyspring/vuejs/936914#Vueextend___33 2.要明確一點Vue.extend 可以創建一個未掛載的組件 ~~~ >[danger] ##### 使用 $mount 來掛載未被掛載的組件 [vue 文檔的講解vm-mount](https://cn.vuejs.org/v2/api/#vm-mount) * 將一個未被掛載的組件掛載到body 標簽上 ~~~ 1.掛載body 的過程少許有些不同 首先我們調用了 '$mount' 方法對組件進行了手動渲染，但它僅僅是被渲染好了，并沒有掛載到節點上， 也就顯示不了組件。此時的 component 已經是一個標準的 Vue 組件實例，因此它的 '$el' 屬性也可以被訪問 我們拿到'$el'后就可以直接將組件組件插入進'document.body' 中 ~~~ ~~~ import Vue from 'vue'; const AlertComponent = Vue.extend({ template: '<div>{{ message }}</div>', data () { return { message: 'Hello, Aresn' }; }, }); const component = new AlertComponent().$mount(); document.body.appendChild(component.$el); ~~~ >[info] ## 簡寫 ~~~ 1.其實可以參看我們用cli 腳手架的時候明顯可以看出來，這里的組件注冊明顯沒有使用'extend' 而是單獨使用 一個vue 實例配合render 函數，因此我們也可使用這種方法來簡寫一個將未注冊組件掛載到頁面的方法 ~~~ ~~~ import Vue from 'vue'; import Notification from './notification.vue'; const props = {}; // 這里可以傳入一些組件的 props 選項 const Instance = new Vue({ render (h) { return h(Notification, { props: props }); } }); const component = Instance.$mount(); document.body.appendChild(component.$el); ~~~ >[danger] ##### 如何使用 ~~~ 1.如果想操作 Render 的 Notification 實例,可以直接從實例利用$children 取出來，當然這是一個數組，可以 對組件增加一些屬性標記這樣就可以從數組中取出自己準備想要的組件，因為上面的案例只有一個因此直接、 取第一個 const notification = Instance.$children[0]; ~~~ 注： ~~~ 1.需要注意的是，我們是用 $mount 手動渲染的組件，如果要銷毀，也要用 $destroy 來手動銷毀實例， 必要時，也可以用 removeChild 把節點從 DOM 中移除。 ~~~