详解Vue2.0组件的继承与扩展

Vue2.0组件继承与扩展是Vue组件化开发中非常重要的两个概念。组件继承是指新建一个组件并从现有组件中继承其行为，而组件扩展则是指在现有组件的基础上添加新的功能。

一、 组件继承

组件继承主要有两种方式：mixin和extends。

1.mixin

mixin是Vue中提供的一种组件复用的方式，可以将多个组件中相同的属性或方法提取出来，然后混入到一个新的组件中。有点像面向对象中的多重继承。

具体使用方式如下：

// 定义一个mixin对象
var myMixin = {
  created: function() {
    console.log('mixin实例创建了');
  },
  methods: {
    doSomething: function() {
      console.log('mixin方法被执行');
    }
  }
};

// 定义一个组件并使用mixin
var MyComponent = Vue.extend({
  mixins: [myMixin],
  data: function() {
    return {
      message: '这是一个组件'
    }
  },
  created: function() {
    console.log(this.message);
  }
});

// 创建一个MyComponent实例并调用mixin方法doSomething
var vm = new MyComponent();
vm.doSomething(); // mixin方法被执行

在上面的例子中，我们定义了一个mixin对象myMixin，然后将其混入到一个新的组件MyComponent中。在MyComponent中，我们还定义了一个data对象，然后在created钩子函数中打印出了data中的message属性。最后我们创建了一个MyComponent实例，并调用了之前混入的mixin方法doSomething。

2.extends

extends是Vue中另一种组件继承的方式，可以从一个已有的组件中继承其行为，并进行修改或扩展。

具体使用方式如下：

// 定义一个基础组件
var BaseComponent = Vue.extend({
  data: function() {
    return {
      message: '这是一个基础组件'
    }
  },
  created: function() {
    console.log(this.message);
  }
});

// 定义一个扩展组件，并继承BaseComponent
var ExtComponent = BaseComponent.extend({
  data: function() {
    return {
      message: '这是一个扩展组件'
    }
  }
});

// 创建一个ExtComponent实例
var vm = new ExtComponent();

在上面的例子中，我们定义了一个基础组件BaseComponent，在BaseComponent中定义了一个data对象和一个created钩子函数。然后我们使用BaseComponent.extend()方法，创建了一个扩展组件ExtComponent，并在其中重新定义了data中的message属性。最后我们创建了一个ExtComponent实例并打印出了实例中的message属性。

二、 组件扩展

组件扩展是在现有组件的基础上添加新的功能。Vue中常用的扩展方式有两种：mixins和props。

1.mixins

在vue中，我们可以通过mixins为已有组件添加新的选项，如methods、computed、created等。mixins也是一种组件复用的方式。

var MyComponent = {
  data: function() {
    return {
      message: '原始组件'
    }
  },
  created: function() {
    console.log(this.message);
  }
};

// 定义一个用于添加新选项的mixin
var StyleMixin = {
  created: function() {
    console.log('weight: ' + this.weight + 'kg');
  }
};

// 使用mixins扩展MyComponent
Vue.mixin(StyleMixin);

var vm = new Vue({
  mixins: [MyComponent],
  data: {
    weight: 50
  }
});

在上面的例子中，我们定义了一个MyComponent组件，其中定义了一个data对象和一个created钩子函数。然后我们创建了一个StyleMixin，其中包含一个created钩子函数。最后我们使用Vue.mixin()方法，将StyleMixin混入到Vue中。在创建Vue实例的时候，我们用mixins选项将MyComponent扩展了出来，并定义了一个weight属性。在扩展后的MyComponent中，我们在created钩子函数中打印出了weight属性。

2.props

props是在组件中用于传递数据的一个选项。props可以是一个简单的字符串数组，也可以是一个对象，其中包括属性名和值类型的定义。

var Parent = {
  template: '<div><Child :message="msg"></Child></div>',
  data: function() {
    return {
      msg: '这是来自父组件的信息'
    };
  },
  components: {
    Child: {
      props: ['message'],
      template: '<div>{{ message }}</div>'
    }
  }
};

在上面的例子中，我们定义了一个父组件Parent和一个子组件Child。在Parent组件中，我们定义了一个data对象，并将其传递给Child组件。在Child组件中，我们使用props选项接收从父组件传递过来的数据，并在模板中将其渲染出来。

总结：

组件继承和扩展是Vue组件化开发中非常重要的两个概念，用于提高组件的重用性和可维护性。mixins和props是Vue组件开发中常用的扩展方式，可以根据不同的需求灵活使用。需要注意的是，在组件继承和扩展的过程中尽量避免命名空间冲突，以免造成不必要的问题。