vue组件通信

1.组件传值

父传子 props

子传父   （子）通过事件 this.$emit('父事件'，参数) ； 
        （父）父事件（）{ this.参数 = 参数 }

2.非父子组件

单独创建一个vue实例 bus,然后Vue.prototype.$bus = Bus; 暴露到全局

组件1触发：this.$bus.emit('事件名', 参数);

组件2接收： this.$bus.on('事件名'，（）=>{ this.参数= 参数})； 
可以在created中开始监听，在beforeDestroy中off取消

3.vuex的使用

var store = new Vuex.Store({

    state:{

        初始化状态值，如果没有data，以状态值为准

    }，

    getters:{

        获取状态值，可以通过方法处理state

    }，

    mutations:{

        改变状态值的方法，里面的方法必须是同步函数

    }，

    actions：{

        用来触发mutations里面的方法

        increment（context）{

            context.commit('方法名'，参数)

        }

        也可以通过promise实现异步

    }

})

4.组件内部

export default {

    components:{ ...组件名 }，

    props：{ 父组件传参 }，

    data（）{

        return {

            注册数据，默认数据

        }

    }，

    methods:{

        组件内部的方法

        方法1(){ },

        方法2(){ },

    },

    computed:{

        实现某一属性的实时计算

        可以存储在缓存中，不需要每次都重新渲染

    }，

    beforeCreate(){

        组件实例刚被创建，组件属性计算之前

    }，

    ------监控data的变化以及vue内部初始化事件------

    created(){

        组件实例创建完成，属性已绑定，但Dom未生成

    }，

    -----检测是否el挂载，判断模板参数

    beforeMount（）{

        组件渲染在Dom上之前

    }，

    -----dom渲染-------

    mounted(){

        组件渲染在Dom上之后

        在这里调用数据请求的方法获取数据，

        在这里可以操作实体dom对象

    }，

    ----程序实时检测数据变化----

    beforeUpdate(){

        组件更新之前

    }，

    -------实时更新DOM------

    updated(){

        组件更新后

    }，

    beforeDestory(){

        组件销毁前

        这里可以取消事件的监听

    }，

    destoryed(){

        组件销毁完成

    }，

    watched:{

        监听某一属性值的变化

    }

}

---