vue基础（6）--component和extend扩展

import Vue from 'vue'

const component = {
    props:{
        active:Boolean //类型检查的功能
        propOne:String,
        onChange:Function,
        typeboolean:{
            type:Boolean,
            default:true,
            required:true
        },
    },
    template:`<div>
            <input type="text" v-model="text">
            <span @click="onChange">{{propOne}}</span>
            <span v-show="active">seeme if active</span>
        </div>`,
    data(){             //非单个vue文件的话，得用方法。防共用同套数据
        return {
            text:0
        }
    },
    methods:{
        onChange(){
            this.$emit('receiveClickEvent')
        }
    }
}

Vue.component('Comp',component)

new Vue({
    components:{
        Comp:component,    
    },
    el:'#root',
    template:
    `<div>
        <comp :active="true" :prop-one="this is one"></comp>
        <comp :active="false" @receiveClickEvent="handleClick"></comp>
    </div>`,
    methods:{
        handleClick(){
            console.log('i received message')
        }   
    }
})复制代码

不要在组件 内修改prop值，传方法到外部，引用处修改。

--------------------------------来势汹汹的分割线-------------------------------

extend功能： 非常实用，结合js原型对象知识，可做vue上的全局控件，扩展组件功能等。。

import Vue from 'vue'

cosnt component = {
    props:{
        active:Boolean //类型检查的功能
        propOne:String,
        onChange:Function,
        typeboolean:{
            type:Boolean,
            default:true,
            required:true
        },
    },
    template:`<div>
            <input type="text" v-model="text">
            <span @click="onChange">{{propOne}}</span>
            <span v-show="active">seeme if active</span>
        </div>`,
    data(){
        return {
            text:0
        }
    },
    methods:{
        onChange(){
            this.$emit('receiveClickEvent')
        }
    }
}
const CompVue = Vue.extend(component)
new CompVue({
    el:'#root',
    propsData:'xxx ',        //用prop方法传值失败，只能用propsData
    data:{                   //可以覆盖
        return {
            text:0
        }
    },
    mounted(){
        console.log('后调用')
    }
})

const component2 ={
    extends:component,   //可以扩展组件，公用组件
    data(){
        return {
        }
    },
    mounted(){
        console.log(this.$parent.$options.name)  //Root
        this.$parent.text = '12345'  //可修改父类值,少用，易混淆
    }
}

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

复制代码