Vue 综合- extend

子组件代码

const compoent = {
  props: {
    active: Boolean,
    desc: String
    // desc: {
    //   type: String,
    //   required: true
    // }
  },
  template: `
    <div>
      <input type="text" v-model="text"></input>
      <span v-show="active">{{desc}}</span>
    </div>
  `,
  data () {
    return {
      text: 0
    }
  },
  mounted () {
    console.log('子组件挂载完成');
    console.log(this.$parent); // 获得父组件
    console.log(this.$parent.$options.name); // 获得父组件name
  }
}

Vue.extend() 扩展方式：

// Vue.extend 扩展出来的组件，如果需要修改 props 中的值，需要重新声明 propsData 对象才可以修改，重新声明 data 则可以直接覆盖内部的 data 对象。
// 内部同时实现挂载方法 mounted() ，会发现这两个方法都会被调用，先调用子组件里面的 mounted() 然后在调用扩展组件里面实现的
const compVue = Vue.extend(compoent)

// 方式一:
new compVue({
  el: '#app',
  propsData: {
    active: true,
    desc: "dzm"
  },
  data:{
    text: 'dzm'
  },
  mounted () {
    console.log('扩展组件挂载完成');
  }
})

// 方式二:
new Vue({
  el: '#app',
  components: {
    comp: compVue
  },
  template: '<comp></comp>'
})

extends: compoent 扩展方式：

// 扩展
const compoent2 = {
  extends: compoent,
  data () {
    return {
      text: "dzm"
    }
  },
  mounted () {
    console.log('扩展组件挂载完成');
  }
}

new Vue({
  name:'root',
  el: '#app',
  components: {
    comp: compoent2
  },
  data:{
    active: true,
    desc: 'dzm'
  },
  template: '<comp :active="active" :desc="desc"></comp>'
})