Vue项目中使用继承extends实现复用代码

<template>
  <div class="">
      这是父组件
      {{message}}
  </div>
</template>
<script>
export default {
  name: 'Parent',
  data() { 
    return {
        message: "Hello Vue",
        sayHello: "Parent say hello"
    }
  },
  methods:{
      showMessage(){
          alert(this.sayHello + this.message);
      }
  },
 }
</script>

<template>
  <div class="">
      这是子组件
      {{message}}
      <button @click="showMessage">点击</button>        
  </div>
</template>
<script>
import Parent from "./Parent.vue";
export default {
  name: 'Child',
  extends: Parent,
  data(){
      return{
          sayHello: "Child say hello"
      }
  }
 }
</script>

<template>
  <div class="about">
    <h1>这是about</h1>
    <Child/>
  </div>
</template>
<script>
import Child from "./Child.vue";
export default {
  name: "About",
  components:{
    Child
    },
}
</script>