# component - 手动挂载组件

单页面 Vue 应用的渲染：

import Vue from 'vue'
import App from './App.vue'

// 指定 el
new Vue({
  el:'#app',
  render: h => h(App)
});

// 使用 #mount 方式
new Vue({
  render: h => h(App)
}).$mount('#app');

1
2
3
4
5
6
7
8
9
10
11
12
13

有的时候需要动态的指定 Vue 组件的渲染位置，比如设置一个全局的 modal，需要把 modal 挂载在 body 下面。

# 实现

1.使用 Vue.extend 创建实例的方式

import Vue from 'vue';
import Modal from './Modal.vue';

// 生成 Modal 实例
const ModalComponent = Vue.extend(Modal);
// 手动渲染
const component = new ModalComponent().$mount();
// 挂载到 body 下面
document.body.appendChild(component.$el);

1
2
3
4
5
6
7
8
9

使用 Render 函数

import Vue from 'vue';
import Modal from './Modal.vue';

const props = {};  // 这里可以传入一些组件的 props 选项
// 生成 Modal 实例
const Instance = new Vue({
  render (h) {
    return h(Modal, {
      props: props
    });
  }
});
// 手动渲染
const component = Instance.$mount();
// 挂载到 body 下面
document.body.appendChild(component.$el);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

手动指定 el

import Vue from 'vue';
import Modal from './Modal.vue';

// 指定 container
const containerDivEl = document.createElement('div');
document.body.appendChild(containerDivEl);
const props = {};  // 这里可以传入一些组件的 props 选项
// 生成 Modal 实例
const Instance = new Vue({
  el: containerDivEl,
  render (h) {
    return h(Modal, {
      props: props
    });
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 使用

如果要操作 render 方法渲染的 Modal 实例，可以直接从 $children 里面取出来

const Modal = Instance.$children[0];

# 注意

用 $mount 手动渲染的组件，如果要销毁，也要用 $destroy 来手动销毁实例，必要时，也可以用 removeChild 把节点从 DOM 中移除。

← 面向对象编程 vue - 事件修饰符 →