vue组件mixins和extends的使用

一、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);

页面调用属性mixins（Array<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)，这一层。可见通用的成员变量（包括属性和方法）抽象成为一个父类，提供给子类继承，这样可以让子类拥有一些通用成员变量，然而子类也可以重写父类的成员变量。这样的整个编程思想就很面向对象，也就是继承性。