extends 扩展
<!--
详情：
许声明扩展另一个组件(可以是一个简单的选项对象或构造函数)，而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。
mixins 与 extends 的区别：
mixins: 多继承、 任何文件都可以引入 去继承里面的属性跟方法
extends： 单继承、对单个组件的扩展性丰富
-->
<script>
// 单独js文件 (extends.js)
const indexExtends = {
data () {
return {
Title: 'extends扩展'
}
},
mounted () {
console.log('extends扩展 钩子函数');
}
}
export default indexExtends;
// vue 组件引入
import indexExtends from "./extends.js";
export default {
extends: indexExtends // 使用扩展
}
</script>
<!--
mixins、extends、components 三者执行顺序以及属性、方法覆盖
三者执行顺序： extends > mixins > components
覆盖顺序： components > mixins > extends
-->
mixins 混入
<!--
详情：
mixins 接受一个混入对象的数组，混入实例对象可以像正常的实例对象一样包含选项，他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。
-->
<script>
// 单独js文件 (mixins.js)
const indexMixins = {
data () {
return {
Title: 'mixins混入'
}
},
methods: {
},
mounted () {
console.log('mounted 钩子函数');
}
// ... 包含所有 选项函数、属性
}
export default indexMixins;
// vue 组件引入
import indexMixins from "./mixins.js";
export default {
mixins: [indexMixins] // 使用混入
}
</script>
<!--
!
!
!
!!!注意：
再俩个文件公用混入时，只能公用相同的处理函数，以及相同的变量属性，无法进行消息传递！！！
-->
