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

立即学习:https://edu.csdn.net/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方法，对于扩展的方法没有打印是因为，扩展中的方法和构造器中的方法名字相同，所以不会打印扩展器中的方法。

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