component传值问题

Vue.component('xxx',{

template:'

xxxxxxxxx

'  //必须有跟元素,

data:function(){

return:{

xxx:xxx,

}

},

methods:{

xxx:function(){

xxx

}

}

})

父子传值

Vue.component('my-component',{
             props:['message'],
            template:'{{message}}

'  

        });

或者

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

abc="哈哈哈哈或或或">

子父传值

Vue.component('father',funciton{

template:'

'，

methods:function(){

abcd:function(data){

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

如子元素中的  data.name

}

}

})

Vue.component('son',funciton{

template:'

xxxx

',

methods:{

chuanzhi:function(){

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

}

},

data:function(){

return {

name:xxxx

}

}

})

兄弟组件传值

var Event =  new Vue()

Vue.component('huahua',{
    template:'
花花说:{{said}}
',
    data:function () {
        return {
            said:""
        }
    },
    methods:{
        change:function () {
            Event.$emit('content',this.said)
        }
    }
})
Vue.component('i-said',{
    template:'
我说:{{i_said}}
',
    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",

})