vue组件mixins和extends的使用

本文介绍了Vue中mixin的全局混入和局部混入,全局混入影响所有Vue实例,不推荐在应用代码中使用;局部混入可减少代码量、减少源代码污染。还讲解了继承extends,以及mixins和extends的区别,二者都可理解为继承,且分析了它们在钩子函数、methods等方面的继承规则。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、mixin全局混入

全局注册一个混入,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入,向组件注入自定义的行为。不推荐在应用代码中使用。全局mixin就是给全部Vue文件添加一些公用的实例(方法,过滤器and so on)

1、在src目录下新建一个mixins目录,在mixins目录下新建一个index.js文件。写一个供全部vue实例使用的跳转方法。

export default = {
  data(){
    return{};
  },
  methods:{
    loadPage(routerName,param){
      if(param){
        this.$router.push({name:routerName,query:param});
      }else{
        this.$router.push({name:routerName});
      }
    }
  }
}

把mixins注册全局,在src/main.js文件加入以下两行

import Mixin from './mixins';
Vue.mixin(Mixin);

页面调用属性mixinsArray<Object>里的loadPage方法,需要用到路由跳转的页面如下:

<template>
  <div>
    <p>这是index页面</p>
    <p @click="loadPage('Index')">Index</p>
    <p @click="loadPage('About')">About</p>
    <p @click="loadPage('Product')">Product</p>
  </div>
</template>

二、mixin局部混入

mixin局部混入主要用于

  • 使用混入可以减少代码量,实现代码重用。
  • 后期需要增加方法时,使用混入会减少源代码的污染。

1.新建mixin.js文件,注册一个mixin对象,定义需要的方法或者数据

2、在需要的页面引入并使用,混入

三、继承extends

参数:对象

用法:使用Vue构造器,创建一个“子类”,参数是一个包含组件选项的对象,其中,data选项中必须是函数

描述:Vue.extend返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue的实例构造器,它常常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件作为标签的自定义元素时,会自动调用“扩展实例构造器”来生产组件实例,并挂在到自定义元素上

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

结果如下:

<p>Walter White aka Heisenberg</p>

四、mixins和extends的区别

两个都可以理解为继承,mixins接收对象数组(可理解为多继承),extends接收的是对象或函数(可理解为单继承)。

1、继承钩子函数测试:

const extend = {
  created () {
    console.log('extends created')
  }
}
const mixin1 = {
  created () {
    console.log('mixin1 created')
  }
}
const mixin2 = {
  created () {
    console.log('mixin2 created')
  }
}
export default {
  extends: extend,
  mixins: [mixin1, mixin2],
  name: 'app',
  created () {
    console.log('created')
  }
}

控制台输出:

extends created
mixin1 created
mixin2 created
created
  • 结论: 优先调用mixins和extends继承的父类,extends触发的优先级更高,相对于是队列
  • push(extend, mixin1, minxin2, 本身的钩子函数)
  • 经过测试,watch的值继承规则一样。

2、继承methods测试

const extend = {
  data () {
    return {
      name: 'extend name'
    }
  }
}
const mixin1 = {
  data () {
    return {
      name: 'mixin1 name'
    }
  }
}
const mixin2 = {
  data () {
    return {
      name: 'mixin2 name'
    }
  }
}
// name = 'name'
export default {
  mixins: [mixin1, mixin2],
  extends: extend,
  name: 'app',
  data () {
    return {
      name: 'name'
    }
  }
}
// 只写出子类,name = 'mixin2 name',extends会被mixins覆盖
export default {
  extends: extend,
  mixins: [mixin1, mixin2],
  name: 'app'
}
// 只写出子类,name = 'mixin1 name',mixins后面继承会覆盖前面的
export default {
  mixins: [mixin2, mixin1],
  extends: extend,
  name: 'app'
}
  • 结论:子类再次声明,data中的变量都会被重写,以子类的为准。
  • 如果子类不声明,data中的变量将会最后继承的父类为准。
  • 经过测试,props中属性methods中的方法computed的值继承规则一样。

 五、总结分析

关于mixins和extend你可以理解为mvc的c(controller),这一层。可见通用的成员变量(包括属性和方法)抽象成为一个父类,提供给子类继承,这样可以让子类拥有一些通用成员变量,然而子类也可以重写父类的成员变量。这样的整个编程思想就很面向对象,也就是继承性。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值