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

我们在开发中,可能会碰到这样的情况:
我们需要在某个时刻 在一个动态生成的元素上 挂载某个组件,那么我们该怎么实现呢?
例如,我们在点击按钮之后,在某个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)
}
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值