Vue.component('xxx',{

template:'<div>xxxxxxxxx</div>'  //必须有跟元素,

data:function(){

return:{

xxx:xxx,

}

},

methods:{

xxx:function(){

xxx

}

}

})

父子传值

<my-component message="hello"></my-component>

1. Vue.component('my-component',{  
2.              props:['message'],  
3.             template:'<div class="tem1">{{message}}</div>'  
4.         });
5. 或者
6. 
   

'aaa':{
    template:'#ccc-tp2',
    props:['abc'],
    data:function(){
        return {
            num:15,
            liked:false
        }
    },

<aaa abc="哈哈哈哈或或或"></aaa>

<template id="ccc-tp2">
    <div>
        <button :class="{liked2:liked}"   @click="on_click">啊啊啊啊啊啊啊啊啊啊啊啊啊{{num}}</button>
    </div>
</template>

子父传值

<father></father>

Vue.component('father',funciton{

template:' <div>

<son @xxxx = "abcd"></son>

</div>'，

methods:function(){

abcd:function(data){

//data就是子元素的方法包含传递过来的参数

如子元素中的  data.name

}

}

})

Vue.component('son',funciton{

template:' <div @click="chuanzhi()">xxxx</div>',

methods:{

chuanzhi:function(){

    this.$emit('xxxx',{name:this.name})  //xxxx随意起名 与父元素调用相同即可  {里面写要传的参数}

}

},

data:function(){

return {

name:xxxx

}

}

})

兄弟组件传值

var Event =  new Vue()

Vue.component('huahua',{
    template:'<div>花花说:<input @keyup="change" type="text" v-model="said">{{said}}</div>',
    data:function () {
        return {
            said:""
        }
    },
    methods:{
        change:function () {
            Event.$emit('content',this.said)
        }
    }
})
Vue.component('i-said',{
    template:'<div>我说:{{i_said}}</div>',
    data:function () {
        return {
            i_said:""
        }
    },
    mounted:function () {
        //var _this = this
        // Event.$on('content',function (data) {
        //     _this.i_said = data
        // })
        Event.$on('content',(data) => { //ES6写法，让THIS指向组件内或用注释部分修改也可以
            this.i_said = data
        })
    }
})



var app = new Vue({
    el:"#app",

})