extends 和 mixins

最新推荐文章于 2024-03-20 21:39:33 发布

qq_41302594

最新推荐文章于 2024-03-20 21:39:33 发布

阅读量261

点赞数

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/qq_41302594/article/details/105302269

版权

Vue.js 专栏收录该内容

22 篇文章 3 订阅

订阅专栏

extends 和 mixins

extends

1. 介绍

官网的声明是：

extends 允许声明扩展另一个组件（可以是一个简单的选项对象或构造函数），而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。

这和 mixins 类似。

2. 如何使用

extends 是 Vue 实例内部的一个选项，可以用来在没有使用 Vue.extend 的情况下，扩展另一个组件：

<html>

<head>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <meta charset="utf-8" />
    <title>hello vue!</title>
</head>
<body>
    <div id="app">
        {{ count }}
        <p><button @click="add()">点击增加</button></p>
    </div>
</body>
<script>
    const extendComponent = {
        data() {
            return {
                msg: '我是扩展组件',
                count: 0,
            }
        },
        mounted() {
            console.log('扩展组件挂载完成');
        },
        updated() {
            console.log('扩展组件更细完成');
        },
        methods: {
            add() {
                this.count += 1;
                console.log("增加了1");
            }
        },
    };

    new Vue({
        el: '#app',
        data: {
            msg: '我是原组件',
            count: 0,
        },
        mounted() {
            console.log('原组件挂载完成');
        },
        updated() {
            console.log('原组件更细完成');
        },
        methods: {
            add() {
                this.count += 5;
                console.log('增加了5');
            }
        },
        extends: extendComponent,
    });
</script>
</html>

当加载完成的时候，控制台中会先这样的结果：

在这里插入图片描述

当点击按钮的时候，控制台中会出现这样的结果：

在这里插入图片描述
我们会发现，并没有出现 增加了1 ，这说明，如果扩展组件中拥有和原组件一样的方法，那么扩展组件中的同名方法将不会覆盖掉原组件中的方法。

同时我们注意到，extends 后面只有一个对象，说明 extends 只能扩展一个数组。

mixins

1. 介绍

官网介绍如下：

mixins 选项接受一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选中，使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说，如果你的混入包含一个 create 钩子，而创建组件本身也有一个，那么两个函数都将被调用。

mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

2. 使用

mixins 是 Vue 实例中的一个选项，它接受一个混入对象的数组：

<html>

<head>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <meta charset="utf-8" />
    <title>hello vue!</title>
</head>
<body>
    <div id="app">
        {{ count }}
        <p><button @click="add()">点击增加</button></p>
    </div>
</body>
<script>
    const extendComponent = {
        data() {
            return {
                msg: '我是扩展组件',
                count: 0,
            }
        },
        mounted() {
            console.log('扩展组件挂载完成');
        },
        updated() {
            console.log('扩展组件更细完成');
        },
        methods: {
            add() {
                this.count += 1;
                console.log("增加了1");
            }
        },
    };

    new Vue({
        el: '#app',
        data: {
            msg: '我是原组件',
            count: 0,
        },
        mounted() {
            console.log('原组件挂载完成');
        },
        updated() {
            console.log('原组件更细完成');
        },
        methods: {
            add() {
                this.count += 5;
                console.log('增加了5');
            }
        },
        extends: extendComponent,
    });
</script>
</html>

当组件加载完成时，出现:

在这里插入图片描述

当点击按钮时，出现：

在这里插入图片描述
说明，混入，会保留混入组件的钩子函数，但是，如果出现同名方法，混入对象的方法不能覆盖原方法。

混入一般用在项目主体已经写完，但是需要插入其他的功能时使用。比如商城上线商品秒杀。

qq_41302594

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
extends 和 mixins

extends 和 mixinsextends1. 介绍官网的声明是：extends 允许声明扩展另一个组件（可以是一个简单的选项对象或构造函数），而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。这和 mixins 类似。2. 如何使用extends 是 Vue 实例内部的一个选项，可以用来在没有使用 Vue.extend 的情况下，扩展另一个组件：<htm...
复制链接

扫一扫