Vue.extend 编程式插入组件的实现


Posted in Javascript onNovember 18, 2019

前言

日常中我们要使用一个弹框组件的方式通常是先通过Vue.component 全局或是 component 局部注册后,然后在模版中使用。接下来我们尝试编程式的使用组件。

实现

其实步骤很简单

  1. 通过 Vue.extend() 创建构造器
  2. 通过 Vue.$mount() 挂载到目标元素上
  3. 目标实现一个 alert 弹框,确认和取消功能如下图

Vue.extend 编程式插入组件的实现

document.createElement

其实想要插入一个元素,通过 document.createElement 就可以实现,并非一定需要上面两步,但是涉及到组件的复杂度、样式设置、可维护性所以使用创建构造器的方式比较可行。

Vue.extend()

首先来定义这个弹框的结构和样式,就是正常的写组件即可

<template>
 <div class="grid">
   <h1 class="head">这里是标题</h1>
   <div @click="close">{{ cancelText }}</div>
   <div @click="onSureClick">{{ sureText }}</div>
 </div>
</template>
<script>
export default {
 props:{
  close:{
   type:Function,
   default:()=>{}
  },
  cancelText:{
   type:String,
   default:'取消'
  },
  sureText:{
   type:String,
   default:'确定'
  }
 },
 methods:{
  onSureClick(){
   // 其他逻辑
   this.close()
  }
 }
};
</script>

将创建构造器和挂载到目标元素上的逻辑抽离出来,多处可以复用

export function extendComponents(component,callback){
 const Action = Vue.extend(component)
 const div = document.createElement('div')
 document.body.appendChild(div)
 const ele = new Action({
  propsData:{
   cancelText:'cancel',
   sureText:'sure',
   close:()=>{
    ele.$el.remove()
    callback&&callback()
   }
  }
 }).$mount(div)
}

上面代码需要注意以下几点:

  1. Vue.extend 获得是一个构造函数,可以通过实例化生成一个 Vue 实例
  2. 实例化时可以向这个实例传入参数,但是需要注意的是 props 的值需要通过 propsData 属性来传递
  3. 得到 Vue 实例后,我们需要通过一个目标元素来挂载它,有人首先会想到挂载到 #app 上,这个挂载的过程是将目标元素的内容全部替换,所以一旦挂载到 #app 上,该元素的所有子元素都会消失被替换
  4. 针对第3点,所以创建了一个 div 元素插入到 body 中,我们将想要挂载的内容替换到这个div上

Vue.extend 和 Vue.component component 的区别

  1. Vue.component component两者都是需要先进行组件注册后,然后在 template 中使用注册的标签名来实现组件的使用。Vue.extend 则是编程式的写法
  2. 关于组件的显示与否,需要在父组件中传入一个状态来控制 或者 在组件外部用 v-if/v-show 来实现控制,而 Vue.extend 的显示与否是手动的去做组件的挂载和销毁。
  3. Vue.component component 在组件中需要使用 slot 等自定义UI时更加灵活,而 Vue.extend 由于没有 template的使用,没有slot 都是通过 props 来控制UI,更加局限一些。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
JavaScript学习笔记--常用的互动方法
Dec 07 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
vue如何判断dom的class
Apr 26 Javascript
vue插件实现v-model功能
Sep 10 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 Javascript
深入浅析React中diff算法
May 19 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 #Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 #jQuery
webpack常用配置总览(小结)
Nov 18 #Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 #Javascript
重置Redux的状态数据的方法实现
Nov 18 #Javascript
JavaScript数值类型知识汇总
Nov 17 #Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 #Javascript
You might like
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
js中开关变量使用实例
2017/02/24 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
python3简单实现微信爬虫
2015/04/09 Python
python2.7的编码问题与解决方法
2016/10/04 Python
Python正则表达式完全指南
2017/05/25 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
django使用JWT保存用户登录信息
2020/04/22 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
波兰购物网站:MALL.PL
2019/05/01 全球购物
中科前程Java笔试题
2016/11/20 面试题
大学生毕业求职简历的自我评价
2013/10/24 职场文书
女大学生自我鉴定
2013/12/09 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
餐厅开业活动方案
2019/07/08 职场文书
导游词之南京中山陵
2019/11/27 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL