vue组件

定义一个组件 

const component = {

template:`<div><span v-show="active" @click="handleChange"> is me{{propsOne}}</span></div>`,

data () { //如果不是通过new Vue方式的data，data是个函数,不然数据变动时会影响其他数据

return {

text:123

}

},

}

 定义组件名为compOne

//全局组件，引用该组件
Vue.component('compOne',component)

局部组件

new Vue({ 
    //局部组件
    components:{
        comp:component
    }
}

二组件的props

props:{ //定义组件在被外部使用时可变的行为
        active:Boolean,
        propsOne:string,
        onChange:Function,
        active:{
            type:Boolean,
            require:true,//必须传入的
            define:true//默认值，
            validator(value){ //自定义验证props
                return typeof value === 'boolean'
            }
        }
    },

<comp :active="false" props-one="345"></comp>
<comp :active="true" props-one="345"></comp>

三、修改props定义的值

修props定义的值，vue用再props中定义一个对象修改。在组件中:on-change="handleChange"传递一个handleChange，在data中定义一个变量prop1，在method中定义handleChange函数，操作prop1，组件中:propsOne="prop1",修改成功。

全局组件中需要在methods方法中执行handleChange()调用onChange()

//修改propsOne的值
const component = {
    props:{
        active:Boolean,
        onChange:Function,
        propsOne:string,
    },
    template:`<div>
                <span v-show="active" @click="handleChange"> is me{{propsOne}}</span>
           </div>`,

//在组件中触发handleChange
    methods:{
        handleChange(){
            this.onChange()
        }
    }
}


new Vue({
    data:{
        prop1:'text1' 
    },
    
    //局部组件
    components:{
        comp:component
    },
    el:'#root',
   template:`<div>
        <comp ref = "comp1" :active="true" :propsOne="prop1" :on-change="handleChange" ></comp>
        <comp :active="false" props-one="345"></comp>
        <comp :active="true" props-one="345"></comp>
   </div>`,
   methods:{
    handleChange(){
        this.prop1+=1
    }
   }
})