我们在开发中,可能会碰到这样的情况:
我们需要在某个时刻 在一个动态生成的元素上 挂载某个组件,那么我们该怎么实现呢?
例如,我们在点击按钮之后,在某个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)
}
Logo

前往低代码交流专区

更多推荐