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