一、Mixins的使用
自定义一个mixins.js
export const Mixins = {
data() {
return {
name: '我是 mixins 中的name',
sex: '我是 mixins 中的 sex'
}
},
created() {
console.log('我是 mixins 中的钩子函数 created')
this.add()
this.addin()
},
methods: {
add() {
console.log('我是 mixins 中的函数 add')
},
addin() {
console.log('我是 mixins 中的函数 addin')
}
}
}
父组件 father.vue
<template>
<div></div>
</template>
<script>
import {
Mixins } from '@/mixins/mixins'
export default {
mixins: [Mixins],
data() {
return {
name: '我是父组件中的 name',
sex: '我是父组件中的 sex'
}
},
created() {
console.log('我是父组件中的钩子函数 created')
this.add()
this.addin()
this.out()
},
methods: {
add() {
console.log('我是父组件中的函数 add')
},
out() {
console.log('我是父组件中的函数 out')
}
}
}
</script>
最后执行结果
// => 我是 mixins 中的钩子函数 created
// => 我是父组件中的函数 add
// => 我是 mixins 中的函数 addin
// => 我是父组件中的函数 out
// => 我是父组件中的钩子函数 created
// => 我是父组件中的函数 addin
// => 我是 mixins 中的函数 addin
总结
- 混入对象的钩子将在组件自身钩子之前调用。（mixins > 组件 ==> 钩子函数）
- 值为对象的选项，例如
data、methods、components和directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
Extentds组件继承
允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数)，而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。-
父类（base.vue）
<!--
* @FilePath: \vue-element-admin-master\src\views\test\base.vue
-->
<template>
<div>父组件:{
{
this.hangd}}
<span>{
{
title}}</span>
</div>
</template>
<script>
export default {
components: {
},
data () {
return {
hangd:6,
title:''
};
},
created() {
console.log('我是父类的base',this.hangd)
},
computed: {
},
mounted() {
},
methods: {
add(){
console.log('Base中的父类方法')
}
}
}
</script>
子类 （Son.vue）
<script>
import base from "./base";
export default {
extends: base,//继承父类base.vue
data() {
return {
};
},
created() {
console.log(this)
console.log("子类不改写", this.hangd);
this.add() // 调用父类methord中的 add()
this.title ='不改写'
},
computed: {
},
methods: {
},
mounted() {
}
};
</script>
打印结果
我是父类的base，6
子类不改写 6
Base中的父类方法
改写父类：
<template>
<div>子类改写</div>
</template>
<script>
import base from "./base";
export default {
extends: base,
data() {
return {
hangd: 3
};
},
created() {
this.title ='改写'
console.log("子类改写参数", this.hangd);
},
computed: {
},
methods: {
add(){
console.log('子类改写方法')
}
},
mounted() {
}
};
</script>
打印结果
我是父类的bas 3
子类改写参数 3
子类改写方法 [ add() ]