-
- 子类再次声明，data中的变量都会被重写，以子类的为准
-
- 优先调用mixins和extends继承的父类，extends触发的优先级更高
-
3.mixins接收对象数组（可理解为多继承），extends接收的是对象或函数
-
4.data、props中属性、methods中的方法和computed的值继承规则一样
体现了继承性——————通用的成员变量（包括属性和方法）抽象成为一个父类，提供给子类继承，这样可以让子类拥有一些通用成员变量
<!-- index.vue -->
<template>
<div class='mix'>
<mix1></mix1>
<mix2></mix2>
<extend></extend>
</div>
</template>
<script>
import Mix1 from '@/components/mixextend/Mix1.vue'
import Mix2 from '@/components/mixextend/Mix2.vue'
import Extend from '@/components/mixextend/Extend.vue'
export default {
name: '',
components: {Mix1,Mix2,Extend},
data() {
return {
name: 'app'
};
},
created() {
},
mounted() {
},
methods: {
setData(){
return `${this.name}(我是index.js)`
}
},
computed: {},
watch: {},
}
</script>
<!--extend.vue -->
<template>
<div class='mix1'>
<p class="title">我只是单纯的extend</p>
<p>{{`name的值${this.name}`}}</p>
<p>{{`setData的值${this.setData()}`}}</p>
</div>
</template>
<script>
import extned from "./extend"
export default {
name: '',
extends:extned,
components: {},
data() {
return {
};
},
created() {
},
mounted() {
},
methods: {
},
computed: {},
watch: {},
}
</script>
<style lang='scss' scoped>
.title{
color:red;
font-weight: 700;
font-size:20px;
}
</style>
<!--mix1.vue -->
<template>
<div class='mix1'>
<p class="title">我的mix顺序是mixn1,mixn2</p>
<p>{{`name的值${this.name}`}}</p>
<p>{{`setData的值${this.setData()}`}}</p>
</div>
</template>
<script>
import mixn1 from "./mixn1"
import mixn2 from "./mixn2"
import extned from "./extend"
export default {
name: '',
mixins:[mixn1,mixn2],
extends:extned,
components: {},
data() {
return {
};
},
created() {
},
mounted() {
},
methods: {
},
computed: {},
watch: {},
}
</script>
<style lang='scss' scoped>
.title{
color:red;
font-weight: 700;
font-size:20px;
}
</style>
<!-- mix2.vue -->
<template>
<div class='mix2'>
<p class="title">我的mix顺序是mixn2,mixn1</p>
<p>{{`name的值${this.name}`}}</p>
<p>{{`setData的值${this.setData()}`}}</p>
</div>
</template>
<script>
import mixn1 from "./mixn1"
import mixn2 from "./mixn2"
import extned from "./extend"
export default {
name: '',
mixins:[mixn2,mixn1],
extends:extned,
components: {},
data() {
return {
};
},
created() {
},
mounted() {
},
methods: {
},
computed: {},
watch: {},
}
</script>
<style lang='scss' scoped>
.title{
color:red;
font-weight: 700;
font-size:20px;
}
</style>
// extned.js
export default {
data () {
return {
name: 'extend.js'
}
},
methods: {
setData(){
return `${this.name}(我是extend.js)`
}
}
};
export default {
data () {
return {
name: 'mixn1.js'
}
},
methods: {
setData(){
return `${this.name}(我是mixn1.js)`
}
}
};
export default {
data () {
return {
name: 'mixn2.js'
}
},
methods: {
setData(){
return `${this.name}(我是mixn2.js)`
}
}
};
