mixins
就是混入。
一个混入对象可以包含任意组件选项。
同一个生命周期,混入对象会比组件的先执行。
extends
作用:扩展vue组件时使用
通过外部增加对象的形式,对构造器进行扩展。由于它接收的参数是简单的选项对象或构造函数,所以extends只能单次扩展一个组件,暴露多个extends不会执行
extends会比mixins先执行。执行顺序:extends > mixins > 组件
<template>
<div id="app">
</div>
</template>
<script>
import {mixinsTest,mixinsTest2,extendsTest} from '@/api/test.js'
export default {
components:{
},
mounted(){
},
data() {
return {
}
},
created(){
},
//mixins的created会先被调用,然后再执行组件的created
mixins:[mixinsTest2,mixinsTest], // 先调用那个mixins对象,就先执行哪个
extends:extendsTest, //使用extends
}
</script>
<style>
#app{
padding: 15px;
}
</style>
js文件
//暴露两个mixins对象
export const mixinsTest = {
methods: {
hello() {
console.log("hello mixins");
}
},
created() {
this.hello();
},
}
export const mixinsTest2 = {
methods:{
hello2(){
console.log("hello2");
}
},
created() {
this.hello2();
},
}
//只能使用一个extends对象,多个无效,extends会先于mixins执行
export const extendsTest = {
methods: {
hello3() {
console.log("hello extends");
}
},
beforeCreate(){
console.log("extends的beforeCreated");
},
created() {
this.hello3();
}
}