VueJS扩展方法和数据

Question

我想扩展方法。示例：

Vue.extend({ 
    data: function() { 
     return { 
      fetcData: 'Test', 
     } 
    }, 
    methods: function(){ 
     return { 
      modal: function(){ alert('Modal') }, 
     } 
    } 
}); 
Vue.extend({ 
    .... 
}); 

我使用多个扩展。

// VueJS Instance 
new Vue({ 
    el: 'html', 
    data: { 
     effect: true 
    }, 
    methods: { 
     xhrGet: function() { 
      alert(this.fetcData); // Undefined 
      this.modal(); // Undefined 
     }, 
     xhrPost: function (event) { 
      alert('xhrPost') 
     } 
    } 
}); 

错误代码： this.fetchData未定义。 this.modal不是函数

Answer 1

Vue.extend返回一个新的Vue组件定义，该定义稍后可以使用new关键字实例化，它不会更改全局Vue对象。所以，如果你想创建一个组件层次的尝试：

var BaseComponent = Vue.extend({ 
    methods: { 
    foo: function() { console.log('foo') } 
    } 
}) 

var MyComponent = BaseComponent.extend({ 
    methods: { 
    bar: function() { 
     this.foo() 
     console.log('bar') 
    } 
    } 
}) 

let myComponentInstance = new MyComponent() 

检查出fiddle一个活生生的例子。