资讯专栏INFORMATION COLUMN

Vue.extend用法(主要用于需要 动态渲染的组件,或者类似于window.alert() 提示

masturbator / 3973人阅读

摘要:一简单的使用主要用于需要动态渲染的组件,或者类似于提示组件注意创建的是一个组件构造器,而不是一个具体的组件实例属于的全局,在实际业务开发中我们很少使用,因为相比常用的写法使用步骤要更加繁琐一些。

最近在重构公司的项目,有些组件想要封装的更灵活,例如toast、loading、messageBox等弹窗组件,模仿了mint-ui封装此类组件的方式封装了自己的弹窗组件;

mint-UI的toast、loading、messageBox等弹窗组件基于Vue.extend()方法,也就是预设了部分选项的Vue实例构造器,返回一个组件构造器;用来生成组件,可以在实例上扩展方法,从而使用更灵活;可以理解为当在模版中遇到该组件名称作为标签的自定义元素时,会自动调用这个实例构造器来生成组件实例,并挂载到指定元素上。

一、Vue.extend(options)简单的使用:(主要用于需要 动态渲染的组件,或者类似于window.alert() 提示组件)

注意:extend创建的是一个组件构造器,而不是一个具体的组件实例;
属于 Vue 的全局 API,在实际业务开发中我们很少使用,因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中,Vue.extend + $mount 这对组合是我们需要去关注的。
基础用法:

</>复制代码

  1. // 创建构造器
  2. var Profile = Vue.extend({
  3. template: "

    {{firstName}} {{lastName}} aka {{alias}}

    ",
  4. data: function () {
  5. return {
  6. firstName: "Walter",
  7. lastName: "White",
  8. alias: "Heisenberg"
  9. }
  10. }
  11. })
  12. // 创建 Profile 实例,并挂载到一个元素上。
  13. new Profile().$mount("#mount-point")

可以看到,extend 创建的是 Vue 构造器,而不是我们平时常写的组件实例,所以不可以通过 new Vue({ components: testExtend }) 来直接使用,需要通过 new Profile().$mount("#mount-point") 来挂载到指定的元素上。

第二种写法,可以在创建实例的时候传入一个元素,生成的组件将会挂载到这个元素上,跟$mount差不多,如下:
1、定义一个vue模版:

</>复制代码

  1. let tem ={
  2. template:"{{firstName}} {{lastName}} aka {{alias}}",
  3. data:function(){
  4. return{
  5. firstName:"Walter",
  6. lastName:"White",
  7. alias:"Heisenberg"
  8. }
  9. }

2 、调用;

</>复制代码

  1. const TemConstructor = Vue.extend(tem)
  2. const intance = new TemConstructor({el:"#app"}) //生成一个实例,并且挂载在#app上
二、封装toast组件

首先按照普通写法定义一个vue组件模版,toast.vue,写法与普通组件写法相同;

然后重点来了,看一下怎么具体挂载到vue组件上的

</>复制代码

  1. const ToastConstructor = Vue.extend(toast) // toast就是vue模版
  2. let toastTool = []
  3. const getIntance = () => {// 通过构造器获取实例
  4. if (toastTool.length > 0) {
  5. const intance = toastTool[0]
  6. return intance
  7. }
  8. return new ToastConstructor({
  9. el: document.createElement("div")
  10. })
  11. }
  12. const removeDom = (e) => {
  13. if (e.target.parentNode) {
  14. e.target.parentNode.removeChild(e.target)
  15. }
  16. }
  17. ToastConstructor.prototype.close = function () { // 实例的一些方法
  18. this.visible = false
  19. this.closed = true
  20. this.$el.addEventListener("transitionend", removeDom) // 执行完毕之后删除dom
  21. toastTool.push(this)
  22. console.log(toastTool)
  23. }
  24. const Toast = (options = {}) => { // options是对应的props需要接收的传入的值
  25. const intance = getIntance()
  26. document.body.appendChild(intance.$el) // 将元素append到页面上
  27. intance.message = typeof options !== "object" ? options : options.message || "操作成功"
  28. intance.duration = options.duration || 3000
  29. intance.className = options.className || ""
  30. intance.iconName = options.iconName || ""
  31. intance.position = options.position || ""
  32. intance.closed = false
  33. intance.$el.removeEventListener("transitionend", removeDom)
  34. clearTimeout(intance.timer)
  35. Vue.nextTick(function () {
  36. intance.visible = true
  37. intance.duration && (intance.timer = setTimeout(function () {
  38. if (intance.closed) {
  39. return false
  40. }
  41. intance.close()
  42. }, intance.duration))
  43. })
  44. return intance
  45. }
  46. export default Toast //将Toast方法导出,调用

将Toast方法导出,将这个方法挂载到vue全局变量
Vue.$toast = Vue.prototype.$toast = Toast
Vue.$loading = Vue.prototype.$loading = Loading
在项目中使用时就可以直接用this.$toast()调用,或者Vue.$toast()调用,返回的是一个instance,创建了一个组件。

主要对Vue.extend的用法,主要用于动态渲染组件和一个类似于似于 window.alert() 提示组件

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105475.html

相关文章

  • Vue中你不知道但却很实用黑科技

    摘要:最近数月一直投身于的开源工作中,完成了大大小小多个组件,在组件化开发中积累了不少经验。在开发全局提示组件通知提醒组件对话框组件时,内部都是使用来渲染,但却是来隐式地创建这些实例,这样我们就可以像标题这样使用,但其内部还是通过来管理。 最近数月一直投身于 iView 的开源工作中,完成了大大小小 30 多个 UI 组件,在 Vue 组件化开发中积累了不少经验。其中也有很多带有技巧性和黑科...

    Heier 评论0 收藏0
  • Vue中你不知道但却很实用黑科技

    摘要:最近数月一直投身于的开源工作中,完成了大大小小多个组件,在组件化开发中积累了不少经验。在开发全局提示组件通知提醒组件对话框组件时,内部都是使用来渲染,但却是来隐式地创建这些实例,这样我们就可以像标题这样使用,但其内部还是通过来管理。 最近数月一直投身于 iView 的开源工作中,完成了大大小小 30 多个 UI 组件,在 Vue 组件化开发中积累了不少经验。其中也有很多带有技巧性和黑科...

    NicolasHe 评论0 收藏0
  • 面试被问到Vue?想进一步提升?那就停下来看一下吧

    摘要:两个对象键名冲突时,取组件对象的键值对。允许声明扩展另一个组件可以是一个简单的选项对象或构造函数,而无需使用。这主要是为了便于扩展单文件组件。 Vue作为最近最炙手可热的前端框架,其简单的入门方式和功能强大的API是其优点。而同时因为其API的多样性和丰富性,所以他的很多开发方式就和一切基于组件的React不同,如果没有对Vue的API(有一些甚至文档都没提到)有一个全面的了解,那么在...

    andot 评论0 收藏0
  • VUE2.0学习笔记

    摘要:添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。差别在哪里将特性名转换为从开始支持语法糖,会扩展成一个更新父组件绑定值的侦听器。如果需要条件渲染多个元素,可以使用包裹。 1.前言 安装 直接用 引入(本地或者cdn) npm npm install vue vue-cli官方脚手架 # 全局安装 vue-cli $ npm install --glo...

    pumpkin9 评论0 收藏0
  • Vue-组件详解

    摘要:除了监听事件外,还可以用于组件之间的自定义事件。它仅仅作为一个直接访问子组件的应急方案,应当避免在模板或计算属性中使用。将和合并成,会自动去判断是普通标签还是组件。子组件这里的状态绑定的是父组件的数据。 查看原文站点,更多扩展内容及更佳阅读体验! 组件详解 组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。 全局注册 Vue.component(my-com...

    dadong 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<