parent.vue
定义了1个方法和2个数据

<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>

child.vue
继承父组件，使用父组件中的方法，并覆写父组件中的数据

<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>

about.vue
调用child组件

<template>
  <div class="about">
    <h1>这是about</h1>
    <Child/>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "About",
  components:{
    Child
    },
}
</script>

实现效果，父组件的方法取得了子组件覆写过的数据