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

masturbator 发布于2019-08-23 18:35 / 3935人阅读

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

最近在重构公司的项目，有些组件想要封装的更灵活，例如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 这对组合是我们需要去关注的。
基础用法：


// 创建构造器
var Profile = Vue.extend({
  template: "{{firstName}} {{lastName}} aka {{alias}}",
  data: function () {
    return {
      firstName: "Walter",
      lastName: "White",
      alias: "Heisenberg"
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount("#mount-point")

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

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

let  tem ={
    template:"{{firstName}} {{lastName}} aka {{alias}}",
    data:function(){    
    return{    
    firstName:"Walter",   
    lastName:"White",    
    alias:"Heisenberg"
    }
}

2 、调用；

const TemConstructor = Vue.extend(tem) 
const intance = new TemConstructor({el:"#app"}) //生成一个实例，并且挂载在#app上

二、封装toast组件

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

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

const ToastConstructor = Vue.extend(toast)  // toast就是vue模版
let toastTool = []
const getIntance = () => {// 通过构造器获取实例
  if (toastTool.length > 0) {
    const intance = toastTool[0]
    return intance
  }
  return new ToastConstructor({
    el: document.createElement("div")
  })
}

const removeDom = (e) => {
  if (e.target.parentNode) {
    e.target.parentNode.removeChild(e.target)
  }
}

ToastConstructor.prototype.close = function () { // 实例的一些方法
  this.visible = false
  this.closed = true
  this.$el.addEventListener("transitionend", removeDom) // 执行完毕之后删除dom
  toastTool.push(this)
  console.log(toastTool)
}

const Toast = (options = {}) => {    // options是对应的props需要接收的传入的值
  const intance = getIntance()
  document.body.appendChild(intance.$el) // 将元素append到页面上
  intance.message = typeof options !== "object" ? options : options.message || "操作成功"
  intance.duration = options.duration || 3000
  intance.className = options.className || ""
  intance.iconName = options.iconName || ""
  intance.position = options.position || ""
  intance.closed = false
  intance.$el.removeEventListener("transitionend", removeDom)
  clearTimeout(intance.timer)
  Vue.nextTick(function () {
    intance.visible = true
    intance.duration && (intance.timer = setTimeout(function () {
      if (intance.closed) {
        return false
      }
      intance.close()
    }, intance.duration))
  })

  return intance

}
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() 提示组件

GPU云服务器云服务器父子组件-动态渲染国外类似于aws的主机云服务器主要可以用于哪些方面类似于

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

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

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

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

Heier 2019-08-22 10:47 评论0 收藏0
Vue中你不知道但却很实用的黑科技

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

NicolasHe 2019-08-01 16:03 评论0 收藏0
面试被问到Vue?想进一步提升?那就停下来看一下吧

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

andot 2019-08-26 14:05 评论0 收藏0
VUE2.0学习笔记

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

pumpkin9 2019-08-23 14:38 评论0 收藏0
Vue-组件详解

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

dadong 2019-08-26 12:00 评论0 收藏0