还是从一个简单的代码开始:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue demo</title> </head> <body> <script src="./vue.js"></script> <div id="app"> <p>This is number: {{num}}</p> <p><button @click="add">Add</button></p> </div> <script> let extendObj = { methods: { add : function () { console.log("this is extend add"); } } }; let vue = new Vue({ el: "#app", data: { num : 1 }, methods: { add : function () { console.log("this is original add"); this.num++; } }, extends: extendObj }); </script> </body> </html>
在vue实例中如果有个add方法,则会用vue实例中的add方法。如果没有,则用extends选项扩展出的add方法