# 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
  1. 使用 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
  1. 手动指定 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];
1

# 注意

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

上次更新: 12/17/2021, 4:30:19 PM