vue元件 元件的繼承

import Vue from 'vue'
const component = {
  data () {
    return {
      text: 111
    }
  },
  props: {
    propOne: String
  },
  mounted () {
    console.log('component1 mounted')
  },
  template: `<div>
    <div>component1 {{text}}</div>
    <div>{{propOne}}</div
 
>
  </div>`
}

1. 繼承的方式1， 使用Vue.extend()

傳遞props，不能直接使用props，需要用propsData

const CompVue = Vue.extend(component)

new CompVue({
  el: '#root',
  data () {
    return {
      text: 999
    }
  },
  propsData: { 不能直接使用props
    propOne: 'aaa'
  }
})

2. 繼承的方式2， 使用extends 定義

const component2 = {
  extends: component,
  data () {
    return
 
 {
      text: 222
    }
  },
  mounted () {
    console.log('component2 mounted')
    console.log(this.$parent.$options.name) // Root
    this.$parent.text = 12345
  }
}

new Vue({
  name: 'Root',
  el: '#root',
  data () {
    return {
      text: 333
    }
  },
  components: {
    Comp: component2
  },
  template: `
    <div
 
>
    <div>root {{text}}</div>
    <comp></comp>
    </div>
  `
})

繼承的子元件通過this.$parent可以更改父元件的data，不推薦直接修改父元件的內容
使用extend的好處是，使用一個擁有多個配置項的元件，通過繼承，將不常用到的引數設定預設