关于extends

闲时要有吃紧的心思，忙时要有悠闲的趣味

前言
正文
- 一、extends介绍
- 二、extends的用法
总结
参考文档

前言

返回目录

在 Vue 2.x 中，Vue.extend 曾经被用于创建一个基于 Vue 构造函数的“子类”，其参数应为一个包含组件选项的对象。在 Vue 3.x 中，我们已经没有组件构造器的概念了。应该始终使用 createApp 这个全局 API 来挂载组件。详情请参考官方文档Vue.extend 移除 )

在 Vue 3 中，我们强烈建议使用组合式 API 来替代继承与 mixin。如果因为某种原因仍然需要使用组件继承，你可以使用 extends 选项来代替 Vue.extend。

正文

一、extends介绍

返回目录

关于 extends，可以先开下官网介绍Vue.extend( options )

extends是什么

如果了解mixin，extends对你来说非常简单了。如果不了解mixin，可以查看我之前写的关于关于mixin

vue的extends和mixins类似，通过暴露一个extends对象到组件中使用。
extends会比mixins先执行。执行顺序：extends > mixins > 组件
extends只能暴露一个extends对象，暴露多个extends不会执行

使用场景

从实现的角度看，extends 几乎等同于 mixins。可以认为其作为第一个 mixin 作用在被 extends 的组件上。

然而，extends 和 mixins 表达了不同的意图。mixins 选项主要用来组合功能，而 extends 主要用来考虑继承性。

extends在扩展继承第三方组件上很有用处，不仅保留了原组件的所有功能，还能按照你所需覆盖原有功能

二、extends的用法

返回目录

定义一个extends对象，同样定义两个mixin对象。

//暴露两个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");
        }
    },

    created() {
        this.hello3();
    },
}

组件通过extends属性调用extends对象,通过mixins属性调用mixins对象mixin数组

<script>
import {mixinsTest,mixinsTest2,extendsTest} from '../util/test.js'
export default {
  name: "Home",
	mixins:[mixinsTest2,mixinsTest], // 先调用那个mixins对象，就先执行哪个
  extends:extendsTest  // 使用extends
  created(){
    console.log("组件的created");
  }
}
</script>

总结

返回目录

与诸君共勉，为自己加油！

参考文档

后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！GitHub 地址

文档协议

db 的文档库由 db 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
基于 github.com/danygitgit上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。

Vue应用——关于extends

关于extends

前言

正文

一、extends介绍

extends是什么

使用场景

二、extends的用法

总结

参考文档

文档协议