vue组件之间的通信

一、父组件向子组件传值--props属性传值方式

1.在父组件中,通过给子组件绑定属性传值:

2.在子组件中,通过props接收从父组件传过来的值:

props:['count']

注意:子组件接收父组件传过来的count,在子组件中不能直接修改,要用另一个变量去代替,所以selfCount是可以修改的,如:

props:['count'],
data () {
    return {
        selfCount: this.count
    }
}

二、子组件向父子间传值--$emit事件触发方式

1.子组件绑定点击事件handleClick:

var counter = {
    props: ['count'],
    data: function() {
        return {
            number: this.count
        }
    },
    template: '
{{number}}
',
    methods: {
        handleClick: function() {
            this.number++;
            this.$emit('change',1)
        }
    }
}

2.子组件的handleClick事件触发父组件的事件this.$emit("change",1)

3.在父组件中这么引用子组件:

父组件的handleChagen事件:

methods: {
    handleChange: function(step) {
        this.total = this.total + step;
    }
},

 

三、兄弟组件之间的通信--Bus模式

利用:Bus/发布订阅模式/观察者模式/总线模式

 

1.第一种写法

 

2.第二种方式

//公共bus.js

import Vue from 'vue'
export default new Vue()

组件A：
 

组件B：