Vue.extend 编程式插入组件的实现
前言
日常中我们要使用一个弹框组件的方式通常是先通过Vue.component全局或是component局部注册后,然后在模版中使用。接下来我们尝试编程式的使用组件。
实现
其实步骤很简单
- 通过Vue.extend()创建构造器
- 通过Vue.$mount()挂载到目标元素上
- 目标实现一个alert弹框,确认和取消功能如下图
document.createElement
其实想要插入一个元素,通过document.createElement就可以实现,并非一定需要上面两步,但是涉及到组件的复杂度、样式设置、可维护性所以使用创建构造器的方式比较可行。
Vue.extend()
首先来定义这个弹框的结构和样式,就是正常的写组件即可
这里是标题 {{cancelText}}{{sureText}}
将创建构造器和挂载到目标元素上的逻辑抽离出来,多处可以复用
exportfunctionextendComponents(component,callback){ constAction=Vue.extend(component) constdiv=document.createElement('div') document.body.appendChild(div) constele=newAction({ propsData:{ cancelText:'cancel', sureText:'sure', close:()=>{ ele.$el.remove() callback&&callback() } } }).$mount(div) }
上面代码需要注意以下几点:
- Vue.extend获得是一个构造函数,可以通过实例化生成一个Vue实例
- 实例化时可以向这个实例传入参数,但是需要注意的是props的值需要通过propsData属性来传递
- 得到Vue实例后,我们需要通过一个目标元素来挂载它,有人首先会想到挂载到#app上,这个挂载的过程是将目标元素的内容全部替换,所以一旦挂载到#app上,该元素的所有子元素都会消失被替换
- 针对第3点,所以创建了一个div元素插入到body中,我们将想要挂载的内容替换到这个div上
Vue.extend和Vue.componentcomponent的区别
- Vue.componentcomponent两者都是需要先进行组件注册后,然后在template中使用注册的标签名来实现组件的使用。Vue.extend则是编程式的写法
- 关于组件的显示与否,需要在父组件中传入一个状态来控制或者在组件外部用v-if/v-show来实现控制,而Vue.extend的显示与否是手动的去做组件的挂载和销毁。
- Vue.componentcomponent在组件中需要使用slot等自定义UI时更加灵活,而Vue.extend由于没有template的使用,没有slot都是通过props来控制UI,更加局限一些。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。