vue实现手动动态挂载某个组件

最新推荐文章于 2025-05-26 09:25:49 发布

原创最新推荐文章于 2025-05-26 09:25:49 发布 · 8.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #手动挂载 #动态挂载 #异步 #组件

前端业务实际问题专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种在Vue中手动挂载组件的方法，通过实例化组件并使用vm.$mount()函数将其挂载到指定DOM元素上，实现了动态生成元素上的组件挂载。此方法适用于需要在运行时动态操作DOM结构的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在开发中，可能会碰到这样的情况：
我们需要在某个时刻 在一个动态生成的元素上 挂载某个组件，那么我们该怎么实现呢？
例如，我们在点击按钮之后，在某个div上手动挂载一个组件。

	<button onclick="handleClick()"></button>
	<div id="container"></div>

import Vue from 'vue'
import textArea from './TextInput.vue'

function handleClick() {
	// 获取容器div
	let container = document.getElementById('container')
	// 以textArea中的配置为参数创建一个vue组件
	let textAreaComponent = Vue.extend(textArea)
	// 实例化一个组件并显式调用 vm.$mount() 手动地挂载一个未挂载的实例到某个元素上，支持传参。
	// 例如组件传入参数content,该参数可以在TextInput组件中通过'this.$options.content'获取。
    let textAreaInstance = new textAreaComponent({ 'content': content }).$mount('#container')
    
    // 或者渲染为文档之外的的元素并随后挂载
    // let textAreaInstance = new textAreaComponent({ 'content': content }).$mount()
    // container.appendChild(textAreaInstance.$el)
}