vue 之extends的使用方法总结

vue extends 和extend的使用方法总结

作用：都是扩展vue组件时使用
通过外部增加对象的形式，对构造器进行扩展。由于它接收的参数是简单的选项对象或构造函数,所以extends只能单次扩展一个组件。

import Vue from 'vue'
const comp={//声明第一个对象comp
  props:{
    active:Boolean,
    propOne:String
  },
  template:`<div>
    <input type='text' v-model="a">
    <span @click="handl">{{propOne}}</span>
    <span v-if="active">134</span>
  </div>`,
  data(){
    return {
      a:0
    }
  },
  methods:{
    handl(){
      // this.onChange()
      this.$emit('changea')
    }
  }
}
const comp2={//声明第二个对象comp2
    extends:comp,//通过extends继承comp
    data(){
        return{
            a:100
        }
    }
}

new Vue({
    el:'#test',
    components:{//注册组件到vue实例中
        com:comp2
    },
    template:'<com></com>'
})

下面是extend的代码

import Vue from 'vue'

const comp={//声明一个对象comp
  props:{
    active:Boolean,
    propOne:String
  },
  template:`<div>
    <input type='text' v-model="a">
    <span @click="handl">{{propOne}}</span>
    <span v-if="active">134</span>
  </div>`,
  data(){
    return {
      a:0
    }
  },
  methods:{
    handl(){
      // this.onChange()
      this.$emit('changea')
    }
  }
}
const CompVue=Vue.extend(comp)//compVue 继承comp组件
new CompVue({//实例化组件
    el:'#test',
    propsData:{
        propOne:"xxx"
    },
    data(){
        return{
            a:30
        }
    }
})
new Vue({