详细聊聊Vue的混入和继承

目录
  • 前言
  • 混入
  • 混入注意(重名情况)
  • 局部混入
  • 全局混入
  • 继承
  • 混入和继承的区别
  • 总结

前言

Vue中的混入(mixin)是一个比较简单的知识点。熟悉CSS预处理语言比如less、sass的开发者对mixin肯定很熟悉。Vue中的mixin几乎跟less等里面的mixin一样，都是将定义好的一些功能原样注入Vue组件当中，也有些类似面向对象编程中的继承(我只是说类似:) )。

mixin是一个对象，这个对象的属性可以是Vue实例或者组件实例的生命周期钩子、属性等，当全局混入或者混入到组件后，Vue实例或者组件实例就拥有了mixin中定义的生命周期钩子、属性等等。如果两者中有重复的，会按照一定的规则合并。

混入

  • 将多个vue文件内重复使用的功能代码，提取成单个js文件，在需要使用的地方进行调用即可。
  • 在一个js文件内定义一个对象, 在对象中可以写 vue文件内的 data 、methods、components等所有<script>中可以定义的代码。

混入注意(重名情况)

  • 组件中的 data变量名 和 混入中的 data变量 名, 发生重名时, 以组件为准;
  • 组件中的 methods，computed，wath名称 和 混入中的 methods，computed，wath名称 名, 发生重名时, 以组件为准;
  • 组件中的 生命钩子函数 和 混入中的 生命钩子函数 名, 发生重名时, 都会执行, 但是组件中的钩子函数优先执行 ;

局部混入

全局混入

定义及全局注册

调用

继承

  • 注意：这里是不适合多继承的，多继承问题出现会多。
  • extends除了可以继承 .vue 文件，而且可以和 mixin一样使用 js文件内的对象。
  • extends继承 .vue 文件内的 template内的html是无法继承的

混入和继承的区别

  • 先看看官方文档的定义, 其实两个都可以理解为继承;
  • mixins接收对象数组（可理解为多继承）;
  • extends接收的是对象或函数（可理解为单继承）。
  • 注意: 如果一个组件, 既使用 继承, 又使用 混入, 它们二者中如果有重名, 则混入会覆盖继承

总结

到此这篇关于Vue混入和继承的文章就介绍到这了,更多相关Vue混入和继承内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue中的混入的使用(vue mixins)

    使用场景: 例如我们在Vue单页面开发的时候当多个组件中都需要下拉刷新,或者使用的都是一个方法的时候,我们就可以使用vue mixins进行封装调用,以及继承,具体看代码. 选项合并 var mixin = { data: function () { return { message: 'hello' } }, created:function(){ console.log('我是mixins中的created') }, methods:{ show:function(num){ console

  • 深入了解Vue.js 混入（mixins）

    混入 (mixins)定义了一部分可复用的方法或者计算属性.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 来看一个简单的实例: var vm = new Vue({ el: '#databinding', data: { }, methods : { }, }); // 定义一个混入对象 var myMixin = { created: function () { this.startmixin() }, methods: { startmix

  • Vue之Mixins(混入)的使用方法

    混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合"进入该组件本身的选项. 当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行"合并". 比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先. var Mymixin = { data: function(){ return { message: 'hello', foo: 'ab

  • 记一次Vue.js混入mixin的使用(分权限管理页面)

    需求背景:在一个后台的管理系统中,不同的用户角色对应不同的用户权限.现要求,同一个页面对有操作权限的用户来说是可操作的,对无操作权限的用户来说是只读的,即操作按钮均失效.系统用Vue.js开发. 一.mixin的概念 官方文档这么说:混入是一种分发Vue组件中可服用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 我自己的理解:混入对象具有Vue组件可以声明的所有选项,如[components].[computed].[met

  • 详解Vue.js Mixins 混入使用

    Mixins一般有两种用途: 1.在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染. 2.很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重用. 一.Mixins的基本用法 我们现在有个数字点击递增的程序,假设已经完成了,这时我们希望每次数据变化时都能够在控制台打印出提示:"数据发生变化". 代码实现过程: <!DOCTYPE html> <html lang="en"> <h

  • 详解Vue2.0组件的继承与扩展

    前言 本文将介绍vue2.0中的组件的继承与扩展,主要分享slot.mixins/extends和extend的用法. 一.slot 1.默认插槽和匿名插槽 slot用来获取组件中的原内容,此方式用于父组件向子组件传递"标签数据".有的时候为插槽提供默认的内容是很有用的,例如,一个<my-hello> 组件可能希望这个按钮的默认内容是"如果没有原内容,则显示该内容",但是同时允许用户覆写为别的内容. <body> <div id=&qu

  • 详细聊聊Vue的混入和继承

    详细聊聊Vue的混入和继承

    目录 前言 混入 混入注意(重名情况) 局部混入 全局混入 继承 混入和继承的区别 总结 前言 Vue中的混入(mixin)是一个比较简单的知识点.熟悉CSS预处理语言比如less.sass的开发者对mixin肯定很熟悉.Vue中的mixin几乎跟less等里面的mixin一样,都是将定义好的一些功能原样注入Vue组件当中,也有些类似面向对象编程中的继承(我只是说类似:) ). mixin是一个对象,这个对象的属性可以是Vue实例或者组件实例的生命周期钩子.属性等,当全局混入或者混入到组件后,V

  • web项目开发VUE的混入与继承原理

    web项目开发VUE的混入与继承原理

    目录 混入 混入注意(重名情况) 局部混入 全局混入 定义及全局注册 调用 继承 混入和继承的区别 混入 将多个vue文件内重复使用的功能代码,提取成单个js文件,在需要使用的地方进行调用即可. 在一个js文件内定义一个对象, 在对象中可以写 vue文件内的 data .methods.components等所有<script>中可以定义的代码. 混入注意(重名情况) 组件中的 data变量名 和 混入中的 data变量 名, 发生重名时, 以组件为准; 组件中的 methods,comput

  • 详细聊聊Vue生命周期的那些事

    详细聊聊Vue生命周期的那些事

    目录 前言 一.Vue2中的生命周期 实例的生命周期 其它生命周期钩子 二.Vue3中的生命周期 Options API生命周期 Composition API生命周期 两个新的Vue3生命周期函数 最后 前言 如今学习Vue的人越来越多了,Vue框架或React框架的学习也成为开发了前端开发人员的必备技能,今天我们就来聊聊Vue中的生命周期函数,Vue中生命周期函数的参考价值很高,让我们来一起认识它吧~ 一.Vue2中的生命周期 实例的生命周期 在介绍生命周期之前,我们需要知道在Vue中要渲染

  • 详细聊聊vue组件是如何实现组件通讯的

    详细聊聊vue组件是如何实现组件通讯的

    目录 前言 如何解决组件之间通讯呢? 解决方案: 父传子 实现过程: 原理图示 父组件 Footer.vue 子组件 MyCon.vue 小案例 采用了父传子 父组件 App.vue 子组件 MyProduct.vue 效果展示 子传父 实现过程 原理图示 父组件 App.vue 子组件 MyCon.vue 商品案例 运用了子传父 父组件 App.vue 子组件 MyProduct.vue 效果展示 总结 前言 每一个组件中的变量和数据都是独立的,如果别的组件想要访问另一个组件里的数据该怎么做?

  • 详细聊聊vue中组件的props属性

    详细聊聊vue中组件的props属性

    目录 问题一:那props具体是怎么使用呢?原理又是什么呢?往下看 问题二:那如果我们想给年龄加1岁,怎么实现? 问题三:对于年龄这一类型,我们最希望拿到的是什么数据类型? 问题四:可以限制类型,那是不是也可以限制是否必传呢? 问题五:props接收的属性值可以修改吗? 问题六:必须要修改props属性值,怎么办? 总结:配置项props 总结 今天这篇文章,让你彻底学会props属性-- props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data.el.ref是一个级别的配

  • 详细聊聊Vue.js中的MVVM

    详细聊聊Vue.js中的MVVM

    目录 MVVM的理解 MVVM的原理 脏检查机制: 数据劫持 相同点 实现MVVM 总结 MVVM的理解 MVVM拆开来即为Model-View-ViewModel,有View,ViewModel,Model三部分组成.View层代表的是视图.模版,负责将数据模型转化为UI展现出来.Model层代表的是模型.数据,可以在Model层中定义数据修改和操作的业务逻辑.ViewModel层连接Model和View. 在MVVM的架构下,View层和Model层并没有直接联系,而是通过ViewModel

  • 详细聊聊Vue中的options选项

    目录 Vue中的options选项 options的五类属性 入门属性 使用vue文件添加组件 computed(计算属性) 用途 缓存 示例: watch(监听) 用途 何为变化 deep: true是干什么的? computed和watch的区别 computed计算属性 watch 监听器 总结 Vue中的options选项 options的五类属性 数据: data,props,propsdata,computed,methods,watch DON: el,template,rende

  • 详细分析vue响应式原理

    前言 响应式原理作为 Vue 的核心,使用数据劫持实现数据驱动视图.在面试中是经常考查的知识点,也是面试加分项. 本文将会循序渐进的解析响应式原理的工作流程,主要以下面结构进行: 分析主要成员,了解它们有助于理解流程 将流程拆分,理解其中的作用 结合以上的点,理解整体流程 文章稍长,但大部分是代码实现,还请耐心观看.为了方便理解原理,文中的代码会进行简化,如果可以请对照源码学习. 主要成员 响应式原理中,Observe.Watcher.Dep这三个类是构成完整原理的主要成员. Observe,响

  • 讨论vue中混入mixin的应用

    讨论vue中混入mixin的应用

    混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合"进入该组件本身的选项. 即 mixin 在引入组件之后,会将组件内部的内容如data.method等属性与父组件相应内容进行合并.相当于在引入后,父组件的各种属性方法都被扩充了. 比如在两个不同的组件的组件中调用sayHi方法,需要重复定义,倘若方法比较复杂,代码将更加冗余,但使用mixins 就相对比较简单了. 首先

随机推荐