我在前文中介绍了如何通过 Mixin 混入实现代码复用（点击查看）。除了 Mixin，Vue.js 还提供了另一种代码逻辑复用的方式，即使用 extends 属性。使用 extends 属性可以扩展另一个组件，类似于 Mixin，但使用较少，因此仅了解即可。 下面演示如何通过 extends 属性实现代码的复用。

1，样例代码

<script>
  // extends属性只能复用script标签中的逻辑，不能复用template和style
  export default {
    data() {
      return {
        title: "Hello BasePage"
      }
    },
    methods: {
      bar() {
        console.log("base page bar");
      }
    }
  }
</script>

（2）接着我们在 Home.vue 组件中导入 BasePage.vue 组件，并将其赋值给 extends 属性，以实现代码逻辑的复用。 

<template>
  <div class="home" style="border:1px solid #ddd;margin:10px">
    <!-- 下面使用了BasePage组件定义的数据 -->
    <h4>{{title}}</h4>
    <button @click="bar">单击调用BasePage组件定义的bar方法</button>
  </div>
</template>

<script>
  import BasePage from './BasePage.vue';
  export default {
    // 复用BasePage组件script标签中定义的选项
    extends: BasePage
  }
</script>

（3）最后 App.vue 组件导入、注册和使用 Home.vue 组件。

<template>
    <div class="app" style="border:1px solid #ddd;margin:4px">
        App组件
        <home />
    </div>
</template>

<script>
import Home from './Home.vue';
export default {
    components: {
        Home
    }
}
</script>

2，运行测试