学习笔记(26):Vue2.x从入门到实战-Extends Option 扩展选项

千万少男

于 2020-02-26 21:56:45 发布

阅读量174

点赞数

分类专栏：研发管理文章标签：实战 vue 免费 Vue 前端开发 ViewUI

本文链接：https://blog.youkuaiyun.com/weixin_45721211/article/details/104526103

版权

研发管理专栏收录该内容

23 篇文章

订阅专栏

本文深入探讨Vue.js中extends选项的使用，解释了如何通过extends扩展组件的功能，包括更新钩子和方法的覆盖机制。并通过一个实例展示了构造器方法与扩展方法的执行顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

立即学习:https://edu.youkuaiyun.com/course/play/6823/135335?utm_source=blogtoedu

extends扩展选项

通过外部增加对象的形式，对构造器进行扩展。跟mixins混入很相似。

{{number}}
    <p><button @click="add">add</button></p>

var extendsObj= {
        updated: function () {
            console.log("我是扩展出来的update");
        },
        methods: {
            add: function () {
                console.log("我是扩展出来的方法");
                this.number++;
            }
        }
    }
    var app=new Vue({
        el:'#app',
        data:{
            number:1
        },
        methods:{
            add:function () {
                console.log("我是构造器里的方法");
                this.number++;
            }
        },
        updated:function(){
            console.log("原生的update方法");
        },
        extends:extendsObj
    })

在控制台显示的顺序是，构造器方法先打印，然后是扩展出来的打印，最后是原生的updated方法，对于扩展的方法没有打印是因为，扩展中的方法和构造器中的方法名字相同，所以不会打印扩展器中的方法。

新手一枚，若有不足，请指正！