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

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

  
      这是父组件
      {{message}}
  



export default {
  name: 'Parent',

  data() { 
    return {
        message: "Hello Vue",
        sayHello: "Parent say hello"
    }
  },
  methods:{
      showMessage(){
          alert(this.sayHello + this.message);
      }
  },
 }

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

  
      这是子组件
      {{message}}
      点击        
  



import Parent from "./Parent.vue";

export default {
  name: 'Child',
  
  extends: Parent,

  data(){
      return{
          sayHello: "Child say hello"
      }
  }
  
 }

about.vue 调用child组件

  
    这是about
    
  



import Child from "./Child.vue";

export default {
  name: "About",
  components:{
    Child
    },
}

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